[微信小程序系列] 动画案例之圆点沿着圆圈运动
作者:滴滴公共前端团队 - Tawnia
滴滴作为第一批的小程序开发者,我们也大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们也分享一部分我们做过的案例:
首先用 wx.createAnimation(OBJECT)
创建一个动画实例,OBJECT 里的参数是设置动画 duration、timingFunction、delay、transformOrigin;然后通过 export 方法将动画实例输出并 setData 给组件 data{} 里的 animation 属性。
在开始说下面的小动画之前需要注意以下几点:
- 小程序官方动画 API 文档的最下面的 bug&tip :
bug: IOS/Android 6.3.30 通过step()分隔动画,只有第一步动画能生效。 - 在小程序动画文档里的 wx.creatAnimation(OBJECT) 这个方法提供的参数没有类似 css3 animation-iteration-count 这样的参数。
接来就说说下面的小动画案例:
如上图我们要实现小圆点沿着圆圈轨迹运动的小动画。
WXML:
两个 view
标签,一个是路径圆圈,圆圈可以用背景图来做也可以用 border-radius
来实现;一个是圆点。
<view class='animation-box'><view class = 'time-crl-path'></view><view class = 'crl-dot' animation='{{dotAnData}}'></view>
</view>复制代码
WXSS:
基本设置定位,这里只放宽高。
.animation-box{width: 176px;height:176px;
}
.time-crl-path {width: 176px;height: 176px;......
}.crl-dot {width: 9px;height:9px;......
}复制代码
JS:
transformOrigin
这个参数所设置的是小圆点旋转时的原点,默认是元素中心,下面设置的就是路径圆圈的中心,具体参数需要根据路径圆圈不来算。
Page({data: {dotAnData: {}},onShow: function(){var i = 0var dotAnData =wx.createAnimation({duration: 1000,transformOrigin: '4px 91px'})dotAnFun =setInterval(function() {dotAnData.rotate(6 * (++i)).step()that.setData({dotAnData: dotAnData.export()})}.bind(that), 1000)}
})复制代码
从上面的代码可以看出是使用 setInterval()
解决了文章开头的两项注意事项。
那么为什么不执行 rotate(360)
或者 rotate(180)
?
这就要注意官方文档的 rotate(deg) 的 deg 的取值范围 -180 ~ 180
,从原点顺时针旋转一个 deg。还有就是 rotate animation 在运动角度幅度较大的情况下轨迹会有偏离,就是说在正常设置的 transformOrigin 的情况下圆点运动轨迹会有偏离。
所以上面的小动画案例就是把它拆分,定义 deg 为 6 作基本增加量, ++i 累加,这样在正常的 transformOrigin 下整个动画就是由每个小动画 rotate(6) 组成的。
目前小程序动画对于动画效果还是有限制的,不过简单的动画效果是没问题的啦~
欢迎关注DDFE
GITHUB:github.com/DDFE
微信公众号:微信搜索公众号“DDFE”或扫描下面的二维码
[微信小程序系列] 动画案例之圆点沿着圆圈运动相关推荐
- 【微信小程序系列】微信小程序连接后端数据库(SSM)案例
[微信小程序系列]微信小程序连接后端数据库(SSM)案例 登录页面 login.wxml <view class="page"><loading hidden=& ...
- 【微信小程序系列:二】小程序常用功能:跳转地图、扫一扫、人脸识别、拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏...
一.先言: (- ̄▽ ̄)-,hello,微信小程序系列第二篇,介绍下小程序里的前端常用功能api,可以快速copy使用~ 二.文字可复制: 小程序页面里的文字默认是没有长按复制功能的,需要套个标签来实 ...
- 微信小程序AR应用案例盘点(时尚行业)
在上一篇微信小程序AR行业应用分析中,我对快消行业的微信小程序AR经典案例与解决的痛点问题,结合目前新扩展的微信小程序AR能力进行了盘点. 今天我们则集中在另一个把视觉呈现做到极致的行业--时尚行业, ...
- 微信小程序 本地mysql_微信小程序系列之使用缓存在本地模拟服务器数据库
微信小程序系列之使用缓存在本地模拟服务器数据库 现在将data.js这个文件视作是本地数据库的初始化数据,要做的第一件事就是讲这些初始化数据装进缓存中,以形成数据库的初始化数据 整个应用程序的生命周期 ...
- 【微信小程序系列】微信小程序超简单教程,基本语法,获取用户基本数据信息,实现对云数据库的增删改查及小程序外部api的引用示例(附源码)
[微信小程序系列]微信小程序超简单教程 小程序项目结构 静态页面的构成 HTML:结构 css:样式 js:行为 小程序 页面全部存放在pages, 而且pages目录只能存放页面 页面包括4个文件, ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
- 【微信小程序系列】小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet)
[微信小程序系列]小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet) 登录页面 login.wxml <view class="page">< ...
- image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一 前言 最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
- 【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息 项目结构 两个云函数一个页面 获取模板 注:详细内容中的参数很重要,一会要在云函数里用 代码 app.js // app.js App({onLau ...
最新文章
- Prepare for Android
- docker(三) 制作自己的镜像
- 分布式压测系列之Jmeter4.0
- 表记录的检索(数据查询)
- 织梦系统中一篇文章存放在数据库中的哪些表中
- 【汇编语言与计算机系统结构笔记17】MIPS 汇编初步
- 明年,移动应用开发将出现这八大趋势
- 管道符、重定向、环境变量
- 互联网晚报 | 1月3日 星期一 | 春运首日火车票今日开售;中兴终端2021年出货量超1亿部;抖音上线“学习”频道...
- 健康计划 用户输入身高(m),体重(kg) 计算公式:BMI = 体重 / 身高^2 BMI < 18.5:过轻 18.5≤ BMI <24:正常 24 ≤ BMI <27:过重 27
- 照片怎么转换成jpg?常见渠道一览
- Maven命令行参数
- ceph rgw:bucket policy实现
- 亲历5.12汶川大地震----杨大伟作为志愿者14日奔赴汶川等地抗震救灾
- 迪克体育Dick’s Sporting Goods EDI需求分析
- Kubernetes工作实用命令集结号
- Linux 镜像官网下载地址
- 埃森哲:技术展望2023
- 为网页添加列表和超链接——精美电商悬浮窗
- Subtext v2.0 定制化开发之上传文件File Upload管理