• uni.createAnimation(OBJECT)

    uni.createAnimation(OBJECT)

    创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    HBuilderX 2.0.4+

    注意:

    • export 方法每次调用后会清掉之前的动画操作
    • nvue 暂不支持OBJECT参数说明:
    参数类型必填默认值说明
    durationInteger400动画持续时间,单位ms
    timingFunctionString"linear"定义动画的效果
    delayInteger0动画延迟时间,单位 ms
    transformOriginString"50% 50% 0"设置transform-origin

    timingFunction 有效值:

    说明
    linear动画从头到尾的速度是相同的
    ease动画以低速开始,然后加快,在结束前变慢
    ease-in动画以低速开始
    ease-in-out动画以低速开始和结束
    ease-out动画以低速结束
    step-start动画第一帧就跳至结束状态直到结束
    step-end动画一直保持开始状态,最后一帧跳到结束状态
    1. var animation = uni.createAnimation({
    2. transformOrigin: "50% 50%",
    3. duration: 1000,
    4. timingFunction: "ease",
    5. delay: 0
    6. })

    animation

    动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。

    animation 对象的方法列表:

    样式:

    方法参数说明
    opacityvalue透明度,参数范围 0~1
    backgroundColorcolor颜色值
    widthlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    heightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    toplength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    leftlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    bottomlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    rightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值

    旋转:

    方法参数说明
    rotatedegdeg的范围-180~180,从原点顺时针旋转一个deg角度
    rotateXdegdeg的范围-180~180,在X轴旋转一个deg角度
    rotateYdegdeg的范围-180~180,在Y轴旋转一个deg角度
    rotateZdegdeg的范围-180~180,在Z轴旋转一个deg角度
    rotate3d(x,y,z,deg)同transform-function rotate3d

    缩放:

    方法参数说明
    scalesx,[sy]一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数
    scaleXsx在X轴缩放sx倍数
    scaleYsy在Y轴缩放sy倍数
    scaleZsz在Z轴缩放sy倍数
    scale3d(sx,sy,sz)在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数

    偏移:

    方法参数说明
    translatetx,[ty]一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。
    translateXtx在X轴偏移tx,单位px
    translateYty在Y轴偏移tx,单位px
    translateZtz在Z轴偏移tx,单位px
    translate3d(tx,ty,tz)在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px

    倾斜:

    方法参数说明
    skewax,[ay]参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
    skewXax参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度
    skewYay参数范围-180~180;X轴坐标不变,Y轴坐标延顺时针倾斜ay度

    矩阵变形:

    方法参数说明
    matrix(a,b,c,d,tx,ty)同 transform-function matrix
    matrix3d同transform-function matrix3d

    动画队列

    调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 uni.createAnimation() 一样的配置参数用于指定当前组动画的配置。

    示例代码

    1. <view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>
    1. export default{
    2. data: {
    3. animationData: {}
    4. },
    5. onShow: function(){
    6. var animation = uni.createAnimation({
    7. duration: 1000,
    8. timingFunction: 'ease',
    9. })
    10. this.animation = animation
    11. animation.scale(2,2).rotate(45).step()
    12. this.animationData = animation.export()
    13. setTimeout(function() {
    14. animation.translate(30).step()
    15. this.animationData = animation.export()
    16. }.bind(this), 1000)
    17. },
    18. methods:{
    19. rotateAndScale: function () {
    20. // 旋转同时放大
    21. this.animation.rotate(45).scale(2, 2).step()
    22. this.animationData = this.animation.export()
    23. },
    24. rotateThenScale: function () {
    25. // 先旋转后放大
    26. this.animation.rotate(45).step()
    27. this.animation.scale(2, 2).step()
    28. this.animationData = this.animation.export()
    29. },
    30. rotateAndScaleThenTranslate: function () {
    31. // 先旋转同时放大,然后平移
    32. this.animation.rotate(45).scale(2, 2).step()
    33. this.animation.translate(100, 100).step({ duration: 1000 })
    34. this.animationData = this.animation.export()
    35. }
    36. }
    37. }

    发现错误?想参与编辑?在 GitHub 上编辑此页面!