FFDF2F15-08DC-4113-9156-8BC11CD0F6C2.png
掌握内置组件animation的使用
我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下
weex 提供了一animition模块,通过这个模块的一个api可以实现上述的动画效果
API:transition(el, options, callback)
参数说明
1.el 执行动画组件的引用(ref="el"),通过this.$refs.el获取组件的引用 2.options 是一个对象,通常由四部分组成, styles 设置不同样式过渡效果的键值对,值也是一个对象 duration:动画持续时间 delay:动画延时执行时间 timingFunction:过渡效果 3.callback动画执行完的回调
下面是一个使用例子
animation.transition(el,{
styles:{
transform: 'translate(250px, 100px)',
transformOrigin: 'center center'
},duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},res=>{})
下面讲解一下四个键值对的使用
它可以设置的键为
键 | 描述 | 值 | 默认值 |
---|---|---|---|
width | 动画执行后应用到组件上的宽度值 | int(如100)不使用单位 | 无 |
height | 动画执行后应用到组件上的高度值 | int(如100)不使用单位 | 无 |
backgroundColor | 动画执行后应用到组件上的背景颜色 | string | none |
opacity | 动画执行后应用到组件上的不透明度值 | 介于 0 到 1 间的数值 | 1 |
transformOrigin | 定义变化过程的中心点. 参数 x-aris 可能的值为 left、center、right、长度值或百分比值, 参数 y-axis 可能的值为 top、center、bottom、长度值或百分比值 | x-axis y-axis | center center |
transform | 定义应用在元素上的变换类型,支持下表列出的属性 | object | 无 |
注意
transformOrigin 这个值会影响动画的效果 如果你设置值为 “left top” 那么当旋转的时候,就不会是沿着中心点旋转,而是沿着左上角旋转
下面我们重点说一下transform 的使用
名称 | 描述 | 值类型 | 默认值 |
---|---|---|---|
translate/translateX/translateY | 指定元素移动的偏移量 | 像素值或百分比 | 无 |
rotate | 指定元素将被旋转的角度,单位是度(deg) | number | 无 |
scale/scaleX/scaleY | 按比例放大或缩小元素 | number | 无 |
下面是一些使用案例
transform:"translate(100,200)"// 沿x轴移动100px,y移动200px
transform:'translate(50%, 100)' // 沿x轴移动自身宽度的50%,沿y轴移动100px
transform: 'rotate(180deg)' // 注意一定要加上单位deg
我先说步骤
<script>
里引入的内置模块(animation)导入方式
const animation = weex.requireModule('animation')
var el = this.$refs.test;
如何给组件设置引用
<text class="rectangle" ref="test">字</text>
animation.transition(el,{
styles:{
transform: 'rotate(3.14)',
transformOrigin: 'center center'
},duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},res=>{})
本节的内容到这里就讲完了,请动手实战一下吧!
CEE5B810-6D61-439E-B758-CCC19373861Fdetail.jpg