一直想尝试下鸿蒙里边的动画开发，可是看了好几次官方文档里边的动画解说，总有点似懂非懂的感觉，不是由于文档里边讲的太复杂，相反是讲的太简略了，实例也写的比较入门，基本都是通过一个按钮手动触发的动画，没有说怎样直接发动一个动画，由于这儿牵扯到一个动画变量值的改动机遇，反正疑问仍是蛮多的，最终在重复尝试了若干次之后，终于算是做出来了一个说得过去的动画作用，下面是整个动画的开发进程，希望对正处在初学阶段的鸿蒙开发者们有所帮助
制作爱心
整个动画便是一个跳动并旋转的爱心，所以首要就需求在Canvas中制作出一个爱心，下面是对Canvas的一些初始化操作
这儿创立了一个自定义组件heart，这个组件就用来制作爱心，screenX与screenY别离表明画布的长与宽，这儿还将画布的布景色设置成了通明，这样才干看起来是只有被制作到的当地动起来，另外制作爱心的当地这儿设置成一个坐落画布中间的一个正方形区域，所以这儿还需求三个变量，别离表明这个区域的边长，最高方位与最低方位
startY是最高方位的y坐标，endY是最低方位的y坐标，shortSide是区域的边长，然后在Canvas里边给这几个变量赋值
下面是制作爱心部分，整个爱心由两部分组成，每一部别离离都是一条贝塞尔曲线，并且是实心的贝塞尔曲线，制作的代码如下
制作本身不难，首要便是算好几个操控点的坐标就能够了，最终在进口组件里边调用heart组件，一个赤色的爱心就出来了，代码与作用图如下
爱心看起来不够立体，这儿给爱心加点渐变色让它看起来立体些，办法便是在Canvas中调用
createLinearGradient生成一个CanvasGradient目标，然后调用CanvasGradient的
addColorStop函数别离根据比例设置色彩，详细设置代码如下所示
现在就得到了一个内部渐变方向是从左上到右下的一个赤色爱心了
动画部分
要让这个爱心跳动，最直接的办法便是让heart组件不断更改它的上边距，从一个值抵达另一个值，然后达到一个跳动的作用，那么首要咱们先了解下用ArkTS怎样去设置这么一个动画，这儿就用到了animation函数，它支持如下几个参数
- duration：动画的时长，默许值为1000毫秒
- tempo：动画播映的速度，速度与tempo的值成正比，默许值为1
- curve:动画曲线
- delay:延迟履行动画的时长
- iterations:动画播映的次数，默许值为1，表明i次，-1表明无限循环动画
-
playMode:设置播映形式，默许值为
PlayMode.Normal,表明播映完今后重新开始，PlayMode还能够取值Reverse表明反向播映，Alternate表明正向反向交替播映，AlternateReverse与Alternate设置方向相反 -
onFinish:表明动画完毕今后的回调，当
iterations为-1时分，不触发onFinish
这些都属于一个动画的特点，而能够让咱们爱心跳动的办法便是给上边距设置一个@State的变量，然后在onFinish中不断去更改@State的值，改写heart组件的上边距，这样爱心就跳起来了转换成代码便是下面这个样子
这儿还添加了一个状态变量flag，初始值为false,而initSize初始值为100，所以会在onFinish中将initSize变成20，flag变成true,一个向上的动画就敞开了，跟着这个动画的完毕，又触发onFinish,initSize变成200，flag变成false,就敞开了一个向下的动画，这样重复的进程构成了爱心跳动的动画，咱们看下作用
这颗爱心现已动起来了，可是离所谓的跳动还有点不相同，都知道由于重力作用的关系，物体向上运动是一个由快变慢的减速进程，而下落时则是一个由慢变快的加快进程，所以这儿就需求在不同的进程里边设置不同的动画曲线curve,当爱心向上运动时分，curve设置为Curve.FastOutLinearIn减速运动，当爱心下落时，curve设置为Curve.LinearOutSlowIn加快运动，更改后的代码如下所示
这样一来爱心的跳动就有了速率上的改动，就像真的在跳动相同，再看下作用
有了前车之鉴，再多加点动画作用就比较简略了，比如这儿再添加一个旋转的动画，关于一个组件，要让它旋转的话能够运用rotate函数,接纳的也是一个@State变量，并且在onFinish的时分，改动这个旋转的变量值，就能完结旋转的动画了，代码如下
rotate里边的参数angle表明旋转的视点，当不指定方向参数时分，默许是绕着z轴旋转，也能够指定x,y,z参数，这样也会绕着指定轴旋转，这儿咱们就用默许的z轴旋转，每次动画完毕让旋转的视点添加90度，来看下作用
一个完好的爱心跳动加旋转的动画就做好了，现在来给这个爱心加个影子，让跳动更加形象一些，完成一个影子其实便是在heart底下放一个灰色的组件，然后跟跟着爱心跳动的动画，往上跳了影子就变小，往下掉了影子就变大，所以这便是一个影子组件的宽度和高度的改动动画，跟爱心的跳动相同，什么当地会变就创立什么样的状态变量，这儿创立影子的宽高，还有操控宽高值改动的开关
然后便是创立影子了，影子就用一个Row组件代替，设置一个灰色的布景，以及圆角，动画的特点基本跟跳动动画的特点一致，便是动画曲线没必要做速度改动的作用了，一个线性改动就好，影子的代码如下
这儿还调用blur办法给影子添加点模糊作用，来看下详细作用
到这儿咱们就完结了运用鸿蒙的特点动画来完成的一个跳动的爱心，可是这么个小动画看久了也腻，琢磨着再加点啥，在方才的开发进程中咱们运用特点动画更改了heart组件的上边距以及底部影子的宽高，但形似没有对heart内部也便是Canvas做改动，那么接下来咱们就来动态更改下Canvas的制作色彩
更改爱心色彩
其实做这个部分的时分刚开始想的也是跟之前的动画相同，也用特点动画来做，可是后来发现怎样都改动不了Canvas里边的色彩，想想也是，特点动画改动的也只能是Canvas组件的特点，内部怎样制作其实不属于Canvas的特点，当然改动不了，所以要换个思路，也便是每换一种色彩，就再创立一个Canvas，那么Canvas制作的色彩就不相同了，所以这儿就要运用另一个装修器–@Builder,这个装修器是干啥用的呢，官方文档里边解释是这样的
ArkUI还供给了一种更轻量的UI元素复用机制@Builder，@Builder所装修的函数遵循build()函数语法规矩，开发者能够将重复运用的UI元素抽象成一个办法，在build办法里调用。
说的仍是蛮清楚的，将需求重复运用的ui元素抽取出来作为一个单独的办法，用@Builder来修饰，在build办法里边调用，也能够传递参数，那不就刚好用在咱们这个场景吗，所以这儿也将Canvas抽到一个@Builder的办法里边，代码如下
然后只需求在heart组件里边原来Canvas的当地换成调用paintJob办法，终究达到的作用也是相同的
创立好了@Builder办法今后，接下来就要做两件工作，一个是怎样获取不同色彩，另一个是怎样传入paintJob办法里边，先创立需求用到的色彩
其中cur为当前指向的数组下标，至于怎样获取色彩，仍然仍是通过动画来获取，可是特点动画有必要作用在一个组件上，所以这儿树立一个空文案的Text组件
只要将cur作为文字大小作用在Text的fontSize特点上，就能触发onFinish的回调，这儿便是每秒钟cur就会变换一次下标，然后就能通过下标cur将colors的色彩传到paintJob办法里,这儿又牵扯到一个问题，怎样传呢？@Builder的函数供给了两种办法的传参，值传参跟引证传参，当需求传递的参数为状态变量时分，推荐运用引证传参，咱们这边需求传递的参数为this.colors[this.cur],里边带有状态变量，所以运用引证传参办法，引证传参的格式如下
所以更改后的带有参数的paintJob长这样
而调用paintJob的当地，入参就要用一个大括号括起来，并且显式的将参数名写出来
最终在paintJob里边需求运用参数的时分也不能直接拿来用，需求这样写$$.参数名
这样就成功的将色彩传递给了paintJob函数，完成每一次创立Canvas的时分运用不同的色彩制作，来看下作用
总结
虽说用ArkTS完成了一个爱心跳动的动效，可是多多少少做的还不太顺手，里边有些细节我琢磨着应该还有更好的办法去处理，或许还得需求合作其他语法点一起才干做出更好的作用，反正再多做几个吧，从里边总结一下经验，争取每一次做的动效都能比前一次有所进步。
