HarmonyOS 鸿蒙Next 线上Codelabs系列挑战赛第二期 调用三方库之shimmer

HarmonyOS 鸿蒙Next 线上Codelabs系列挑战赛第二期 调用三方库之shimmer 先上效果图：

一、项目的基本情况

项目共分2个模块，一个是本地库的调用，一个是网络上三方库的调用。本地库主要功能是随机显示若干个不同颜色的圆形图案，实现属性动画的展示，同时熟悉如何新建、调用本地库的流程步骤；网络三方库分别调用lottieETS、shimmer两个（lottieETS示例有详细的介绍，本项目主要是调用shimmer)。shimmer是一个简单灵活的为应用视图添加闪烁效果的库，主要有由左到右倾斜，由左到右竖直，由左到右圆形，由上到下水平等闪光效果。

二、项目结构

三、功能模块介绍

1、本地库

新建方式一：

新建方式二：

，第二、第三步同方式一。

新建成功后如下：

页面效果：

本地库只包含一个自定义组件MyCircle，根据接收到的参数显示圆形，代码如下:

@Component
export struct MyCircle {
  @Prop cRadius:number      //半径
  @Prop fOpacity:number     //透明度
  @Prop fColor:string       //填充颜色
  @Prop xPosition:number    //x坐标位置
  @Prop yPosition:number    //y坐标位置

  build() {
    Column(){
      Circle()
        .size({width:this.cRadius*2,height:this.cRadius*2})
        .fillOpacity(this.fOpacity)
        .fill(this.fColor)
        .position({x:this.xPosition,y:this.yPosition})
  }
}

2.网络三方库

—lottieETS,官方示例有详细的讲解，不再介绍。

—shimmer介绍

shimmer是一个简单灵活的为应用视图添加闪烁效果的库，主要有由左到右倾斜，由左到右竖直，由左到右圆形，由上到下水平等闪光效果

下载安装

npm install @ohos/shimmer --save

备注：按照这种方式安装好后，三方库保存在

我安装在下图1的位置，先在2的位置添加一行代码：

把鼠标移动到红线上面，会有如下提示：

点击Run 'npm install’就可以安装好了

—页面调用，通过如下语句：

import {Shimmer, ShimmerElement} from '@ohos/shimmer'

页面效果：

定义相关的变量

private renderingSettings:RenderingContextSettings=new RenderingContextSettings(true)
private renderingContext:CanvasRenderingContext2D=new CanvasRenderingContext2D(this.renderingSettings)
private animationItem:any=null
mShimmer:Shimmer=new Shimmer()
//mDirection:Shimmer效果方向，默认0：从左上到右下，1：从上到下，2：右下到左上，3：从下到上
@State mDirection:number=0
//mShape:Shimmer效果形状，默认0：直线，1：圆形
@State mShape:number=0
//mShape:Shimmer效果时长，默认1000毫秒
@State mDuration:number=1000
初始化：

aboutToAppear(){
  //初始化Shimmer效果方向和形状
  this.mShimmer.setDirection(this.mDirection)
  this.mShimmer.setShape(this.mShape)
  this.mShimmer.setDuration(this.mDuration)
  this.mShimmer.setRepeatDelay(500)
}

自定义组件：

@Builder MyCanvas(){
  Column(){
    Canvas(this.renderingContext)
      .width('100%')
      .height('100%')
      .backgroundImage('image/sBackground.jpeg')
      .borderRadius(10)
  }.width('100%')
  .height(200)
}

//自定义MyButton
/*
*参数
* txt:string,Button上显示的文字
* flag:boolean,true：点击了改变效果方向按钮，false:点击了改变效果形状按钮
 */
@Builder MyButton(txt:string,flag:boolean){
  Button(txt)
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .type(ButtonType.Normal)
    .borderRadius(10)
    .padding({left:20,right:20,top:10,bottom:10})
    .onClick(()=>{
      if(flag){
        this.mDirection++
        console.info('MyTag -------------mDirection='+this.mDirection)
        this.mDirection=this.mDirection%4
        console.info('MyTag ***********mDirection='+this.mDirection)
      }
      else{
        this.mShape++
        console.info('MyTag ***********mShape='+this.mShape)
        this.mShape=this.mShape%2
        console.info('MyTag ***********mShape='+this.mShape)
      }
      this.mShimmer.setDirection(this.mDirection)
      this.mShimmer.setShape(this.mShape)
    })
}

调用shimmer效果

//Shimmer效果
ShimmerElement({mShimmer:this.mShimmer,content:this.MyCanvas})
  .margin(10)
  .borderRadius(10)
  .opacity(0.4)

调用MyButton改变效果方向、形状代码：

Row({space:15}){
  this.MyButton('改变效果方向',true)
  this.MyButton('改变效果形状',false)
}.margin({top:10,bottom:10})

Slider组件改变效果时长代码：

Slider({
    style:SliderStyle.InSet,
    step:100,
    max:5000,
    min:0,
    value:this.mDuration
  })
  .showTips(true)
  .blockColor(Color.White)
  .trackColor(Color.Gray)
  .selectedColor(Color.Blue)
  .trackThickness(20)
  .onChange((value:number,mode:SliderChangeMode)=>{
    this.mDuration=value
    this.mShimmer.setDuration(this.mDuration)
  })

四、总结

本项目相对简单，主要是熟悉本地库及网络三方库的使用方法，不涉及到很多的组件应用，官方示例的三方库不是最新版本了，希望能够及时更新，同时也希望三方库能够更多更完善一些，尤其是使用方法能更详细一些。

源码地址：https://gitee.com/small2021/hongmeng