基于原生实现高级显示效果

基于原生实现高级显示效果

HarmonyOS
2024-06-11 23:21:22
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
rhlee

文字特效是一个比较常见的功能,下面列举一些遇到的业务需求:

  • 场景一:文字渐变效果
  • 场景二:歌词滚动效果
  • 场景三:文字倒影效果
  • 场景四:跑马灯渐变效果

方案描述

场景一:

文字渐变效果

效果图

方案

使用linearGradient与blendMode结合实现文字渐变效果

核心代码

Row() { 
  Text(this.message) 
    .fontSize(42) 
    .fontWeight(FontWeight.Bold) 
    .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 
}.linearGradient({ 
  direction: GradientDirection.Right, 
  colors: [["#f97794", 0.0], ["#623aa2", 1]] 
}) 
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

场景二:

歌词滚动效果

效果图

方案

使用linearGradient与blendMode结合实现文字渐变效果,在结合动画来实现滚动的效果。

核心代码

Row() { 
  Text(this.message) 
    .fontSize(32) 
    .fontColor(Color.Black) 
    .fontWeight(FontWeight.Bold) 
    .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 
}.linearGradient({ 
  direction: GradientDirection.Right, 
  colors: [[0xff0000, 0.0], [0xff0000, this.value], [0x000000, this.value], [0x000000, 1.0]] 
}).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 
.backgroundImageSize({ width: 0, height: 0 }) 
.onAppear(() => { 
  animateTo({ 
    duration: 5000, 
    finishCallbackType: FinishCallbackType.LOGICALLY, 
    curve: Curve.Linear, 
    iterations: -1, 
    onFinish: () => { 
      this.value = 0 
    } 
  }, () => { 
    this.value = 1 
  }) 
})

场景三:

文字倒影效果

效果图

方案

鸿蒙没有直接设置文字倒影的API,我们可以使用Stack将两个一样的元素叠在一起,将底层的元素沿着X轴翻转180度即可达到倒影效果,具体代码如下所示:

核心代码

Stack() 
  Text("好好学习 天天向上").fontSize(24).fontColor(Color.Red) 
  Text("好好学习 天天向上").fontSize(24).fontColor(Color.Red) 
    .rotate({ 
      x: 1, 
      y: 0, 
      z: 0, 
      angle: "180deg", 
      centerX: "50%", 
      centerY: "100%" 
    }) 
    .linearGradientBlur(60, { 
      fractionStops: [[0, 0], [1, 1]], 
      direction: GradientDirection.Bottom 
    }) 
}

场景四:

跑马灯渐变效果

效果图

方案与核心代码

文字跑马灯实现有两种方案:

**方案一:**使用Marquee组件实现文本跑马灯效果

这种方案实现的跑马灯效果能力更强,可塑性更强,但是注意使用Marquee组件试下的时候不宜在页面中使用过多,该组件存在一定的性能问题,不建议在一个页面中使用超过四个。

Row() { 
  Column() { 
    Marquee({ 
      start: this.start, 
      step: this.step, 
      loop: this.loop, 
      fromStart: this.fromStart, 
      src: this.src 
    }) 
      .overlay('两边透明渐变', { 
        align: Alignment.Bottom, 
        offset: { x: 0, y: -35 } 
      }) 
      .width('90%') 
      .fontColor('#000000') 
      .fontSize(30) 
      .fontWeight(700) 
  } 
  .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN) 
  .backgroundColor(Color.Transparent) 
  .width('100%') 
} 
.width('100%') 
.linearGradient({ 
  angle: 90, 
  // rgba(0, 0, 0, 0) 表示一种完全透明的颜色,其中最后一个参数 alpha(透明度)值为 0,表示该颜色是完全透明的 
  colors: [['rgba(0, 0, 0, 0)', 0], ['rgba(0, 0, 0, 1)', 0.2], ['rgba(0, 0, 0, 1)', 0.8], ['rgba(0, 0, 0, 0)', 1]] 
}) 
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

**方案二:**使用textOverlay属性实现跑马灯效果

这种方案实现的跑马灯效果没有性能问题,但是没有Marquee那样提供了各种回调,如果没有复杂的效果并且需要在页面中大量使用的时候建议使用这一种。

Row() { 
  Column() { 
    Text(this.src) 
      .width('90%') 
      .fontColor('#000000') 
      .fontSize(30) 
      .fontWeight(700) 
      .textOverflow({ overflow: TextOverflow.MARQUEE }) 
  } 
  .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN) 
  .backgroundColor(Color.Transparent) 
  .width('100%') 
} 
.width('100%') 
.linearGradient({ 
  angle: 90, 
  // rgba(0, 0, 0, 0) 表示一种完全透明的颜色,其中最后一个参数 alpha(透明度)值为 0,表示该颜色是完全透明的 
  colors: [['rgba(0, 0, 0, 0)', 0], ['rgba(0, 0, 0, 1)', 0.2], ['rgba(0, 0, 0, 1)', 0.8], ['rgba(0, 0, 0, 0)', 1]] 
}) 
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
分享
微博
QQ
微信
回复
2024-06-12 23:39:45
相关问题
基于原生的水印添加能力
231浏览 • 1回复 待解决
基于原生的跨模块资源访问
299浏览 • 1回复 待解决
基于原生能力的跨应用跳转
332浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
278浏览 • 1回复 待解决
基于原生能力的设备唯一ID方案
241浏览 • 1回复 待解决
怎么基于Java实现视频播放?
1584浏览 • 1回复 待解决
canvas如何实现水印效果
395浏览 • 1回复 待解决
如何实现星级评分效果
57浏览 • 1回复 待解决
基于tabs实现页面布局
198浏览 • 1回复 待解决
图片模糊效果如何实现
346浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
521浏览 • 1回复 待解决
panGesture结合动画实现fling效果
389浏览 • 1回复 待解决
如何等效实现JSONObejct效果
260浏览 • 1回复 待解决
如何通过Progress实现loading效果
41浏览 • 1回复 待解决
基于measure实现的文本测量
180浏览 • 1回复 待解决
如何实现列表页的单选效果
1010浏览 • 0回复 待解决
PopWindow的效果实现有哪些?
293浏览 • 1回复 待解决
tabs结合scroll实现吸顶效果
404浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8920浏览 • 2回复 待解决