这篇“微信小程序如何创建一个动画实例”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序如何创建一个动画实例”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。
创建一个动画实例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 对象的方法列表:
样式:
方法 | 参数 | 说明 |
---|---|---|
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,想用就用,用完即走,不会占用内存。
感谢您的阅读,希望您对“微信小程序如何创建一个动画实例”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。