weex-21-animation模块

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=>{})

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

  • 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

下面是一些使用案例

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)

导入方式

const animation = weex.requireModule('animation')
  • Step2.获取组件的引用
  var el = this.$refs.test;

如何给组件设置引用

<text class="rectangle" ref="test">字</text> 
  • Step3.执行动画
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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自动化测试实战

HTML第三课——css盒子【2】

29014
来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

9729
来自专栏青玉伏案

Web前端上万字的知识总结

下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习。大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每...

27110
来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

2325
来自专栏西枫里博客

CSS中img图片下方出现空白边距的解决办法

偶然发现在排版...

701
来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

3422
来自专栏用户画像

一个简单的卡动车排队系统

682
来自专栏九彩拼盘的叨叨叨

前端学习 第2周 第5天

763
来自专栏IMWeb前端团队

初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题,是因为在项目中有要求用到它。所谓 SVG Path 动画,就是让图形有像人实时绘制一...

2716
来自专栏吾爱乐享

php学习之css选择器(二)

1805

扫码关注云+社区

领取腾讯云代金券