温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何创建一个动画实例

发布时间:2022-01-19 17:00:19 来源:亿速云 阅读:228 作者:清风 栏目:开发技术

这篇“微信小程序如何创建一个动画实例”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序如何创建一个动画实例”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

wx.createAnimation(OBJECT)

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

注意:export方法每次调用后会清掉之前的动画操作

OBJECT参数说明:

参数 类型 必填 默认值 说明
duration Integer 400 动画持续时间,单位ms
timingFunction String "linear" 定义动画的效果
delay Integer 0 动画延迟时间,单位 ms
transformOrigin String "50% 50% 0" 设置transform-origin

timingFunction 有效值:

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

animation


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

animation 对象的方法列表:

样式:

方法 参数 说明
opacity value 透明度,参数范围 0~1
backgroundColor color 颜色值
width length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
height length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
top length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
left length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
bottom length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
right length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值

旋转:

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

缩放:

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

偏移:

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

倾斜:

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

矩阵变形:

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

动画队列


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

示例:

<view animation="{{animationData}}" style="background:red,height:100rpx,width:100rpx"></view>
Page({
  data:{
    animationData:{}
  },
  onShow:function(){var animation = wx.createAnimation({
      duration:1000,
        timingFunction:"ease",
    })this.animation = animation

    animation.scale(2,2).rotate(45).step();this.setData({
      animationData:animation.export()
    })

    setTimeout(function(){
      animation.translate(30).step();      this.setData({
        animationData:animation.export()
      })
    }.bind(this),1000)
  },
  rotateAndScale: function () {// 旋转同时放大this.animation.rotate(45).scale(2, 2).step()this.setData({
      animationData:animation.export()
    })
  },
  rotateThenScale: function () {// 先旋转后放大this.animation.rotate(45).step()this.animation.scale(2, 2).step()this.setData({
      animationData:animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {// 先旋转同时放大,然后平移this.animation.rotate(45).scale(2, 2).step()this.animation.translate(100, 100).step({ duration: 1000 })this.setData({
      animationData:animation.export()
    })
  }
})

小程序是什么意思

小程序是一种不需要下载安装即可使用的应用,通过扫描二维码或是搜一搜立即使用,操作简单,便于传播,能够实现消息通知、线下扫码、公众号关联等七大功能。它基于微信运行的,类似于APP,想用就用,用完即走,不会占用内存。

感谢您的阅读,希望您对“微信小程序如何创建一个动画实例”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI