前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >weex-21-animation模块

weex-21-animation模块

作者头像
酷走天涯
发布2018-09-14 15:19:56
1.1K0
发布2018-09-14 15:19:56
举报
文章被收录于专栏:每日一篇技术文章

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动画执行完的回调

下面是一个使用例子

代码语言:javascript
复制
animation.transition(el,{
                    styles:{
                      transform: 'translate(250px, 100px)',
                          transformOrigin: 'center center'
                    },duration: 800, //ms
                     timingFunction: 'ease',
                     delay: 0 //ms
                },res=>{})

下面讲解一下四个键值对的使用

  • styles

它可以设置的键为

描述

默认值

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

下面是一些使用案例

代码语言:javascript
复制
transform:"translate(100,200)"// 沿x轴移动100px,y移动200px

transform:'translate(50%, 100)' // 沿x轴移动自身宽度的50%,沿y轴移动100px

transform: 'rotate(180deg)' // 注意一定要加上单位deg
  • duration 动画持续时间,单位是毫秒ms 单位可以不用写 duration: 800//800ms
  • timingFunction 过渡效果有五种,最常用的是前四种
  • linear 匀速的过渡
  • ease-in 由慢到快的加速过渡
  • ease-out 由块到慢的减速过渡
  • ease-in-out 先加速后减速的过渡效果
  • cubic-bezier(x1, y1, x2, y2),三次贝塞尔函数中定义变化过程 取值范围0-1

我先说步骤

  • Step1. <script>里引入的内置模块(animation)

导入方式

代码语言:javascript
复制
const animation = weex.requireModule('animation')
  • Step2.获取组件的引用
代码语言:javascript
复制
  var el = this.$refs.test;

如何给组件设置引用

代码语言:javascript
复制
<text class="rectangle" ref="test">字</text> 
  • Step3.执行动画
代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.06.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本节学习目标
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档