文档章节

微信小程序把玩(四十)animation API

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 924
阅读 1
收藏 0

动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。

wx.createAnimation(object)

  • 看官方介绍

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

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

这还是比较好理解的比如第一条对应代码animation: this.animation.export()
第二条比如缩放动画,也就说是一组scale,scaleX, scaleY…为一缩放动画组的一个动画方法,缩放动画组和旋转动画组通过step()链接,按顺序执行。代码中体验吧!看效果反过来看会更容易理解

主要属性:

这里写图片描述

这里主要树下timingFunction和transformOrigin

  • timingFunction 设置动画效果

    • linear 默认为linear 动画一直较为均匀
    • ease 开始时缓慢中间加速到快结束时减速
    • ease-in 开始的时候缓慢
    • ease-in-out 开始和结束时减速
    • ease-out 结束时减速
    • step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
    • step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
  • transformOrigin 设置动画的基点 默认%50 %50 0

    • left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
    • top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%

动画组及动画方法

样式:

这里写图片描述

旋转:

这里写图片描述

缩放:

这里写图片描述

偏移:

这里写图片描述

倾斜:

这里写图片描述

矩阵变形:

这里写图片描述

演示单个动画组效果

这里写图片描述

wxml

 <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="rotate">旋转</button>

js

Page({
  data:{
    text:"Page animation",
    animation: ''
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
    //实例化一个动画
    this.animation = wx.createAnimation({
      // 动画持续时间,单位ms,默认值 400
      duration: 1000, 
      /** * http://cubic-bezier.com/#0,0,.58,1 * linear 动画一直较为均匀 * ease 从匀速到加速在到匀速 * ease-in 缓慢到匀速 * ease-in-out 从缓慢到匀速再到缓慢 * * http://www.tuicool.com/articles/neqMVr * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过 * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过 */
      timingFunction: 'linear',
      // 延迟多长时间开始
      delay: 100,
      /** * 以什么为基点做动画 效果自己演示 * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100% * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100% */
      transformOrigin: 'left top 0',
      success: function(res) {
        console.log(res)
      }
    })
  },

  /** * 旋转 */
  rotate: function() {
    //顺时针旋转10度
    //
    this.animation.rotate(150).step()
    this.setData({
      //输出动画
      animation: this.animation.export()
    })
  },

  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

演示多个动画组效果

这里写图片描述

这里我们只需要更改以下代码即可

  /** * 旋转 */
  rotate: function() {
    //两个动画组 一定要以step()结尾
    /** * 动画顺序 顺时针旋转150度>x,y 放大二倍>x,y平移10px>x,y顺时针倾斜>改变样式和设置宽度宽度 */
    this.animation.rotate(150).step().scale(2).step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000})
    this.setData({
      //输出动画
      animation: this.animation.export()
    })
  }

本文转载自:http://blog.csdn.net/u014360817/article/details/52712205

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
实现微信小程序前端开发_项目2

【业务需求】 完成微信小程序前端开发,对接API接口 【人员要求】 熟练小程序开发,掌握小程序运行机制,并有geek精神,能够定制化小程序开发。有一定造轮功底 熟练掌握HTML5开发技巧,对响应...

zb1490068105360
2017/04/17
3
1
Taro 1.1.4 发布,多端统一开发框架

Taro 1.1.4 已发布,Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应...

王练
11/09
1K
1
小程序scroll-view 实现大图滚动显示总结

有一张大图宽度较大, 一个屏幕展示不开, 需要自动滚动 scrollview显示 wxml

SuShine
04/19
0
0
SAAS小程序电商产品设计交流

错过了4年前的公众号开发,还要继续错过火爆的小程序开发吗? 今天活动的主题是:SAAS小程序电商产品如何开发与设计? 前言: 蜗店,是微信第三方开发服务商平台、可以帮助每一个企业解决通用...

半个鼠标
09/03
50
1
微信小程序开发系列七:微信小程序的页面跳转

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发...

JerryWang_SAP
10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

容器技术系列汇总

docker docker - 在centos7和windows10安装 docker - 镜像加速器 docker - 构建一个简单的docker镜像 docker - 调试Dockerfile docker - 常用命令 docker - Dockerfile常用指令 docker - doc......

细肉云吞
12分钟前
0
0
vue笔记 $set的正确用法

vue2.0 给data对象新增属性,并触发视图更新 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知,直接给student赋值操作,虽然可以新...

Carbenson
13分钟前
0
0
Confluence 6 为边栏添加自定义内容

你可以使用 wiki 标记和自定义内容来对边栏进行更进一步的自定义。 希望添加自定义内容到你的边栏中: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and ...

honeymose
17分钟前
0
0
从现在开始!(上海)

从现在开始,我要暂时告别开发了。开始从测试学起,希望自己在测试方面也会有晋升!

政旭Arvin
22分钟前
1
0
网易免费企业邮箱配置客户端

网易免费企业邮箱客户端(pop、imap、smtp)权限默认开启,对应服务器地址为: 发件服务器: SMTP:smtp.ym.163.com 默认端口为:25 (如勾选ssl安全链接,端口号为994) 收件服务器: POP3...

柴高八斗之父
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部