微信公众号开发
微信小程序|旋转动画效果
问题描述
在小程序中，如果可以用一个动画效果展现一句话或一段文字，会比普通文字呈现更具吸引力，这不仅是体现更多样的文字效果，更是突出这段文字的一个方法。那么接下来就来看一下如何实现一个文字旋转的动画效果吧。
效果图：
解决方案
1 wxml：
这部分很容易实现，只需要设置一个点击旋转标签button以及对一条需要旋转的文字进行数据绑定即可。
|
<view> <view animation="{{animation}}">我在做动画</view> </view> <button type="primary" bindtap="rotate">旋转</button> |
2 js：
js中需要先了解一个animation的api，其中的参数和方法如下：
（1）duration: 动画持续多少毫秒。
（2）timingFunction:“运动”的方式，本例中的“linear”代表动画以匀速的效果来呈现。
（3）delay:多久后动画开始运行，也就是动画延迟开始的时间translate(100,-100)向X轴移动100的同时向Y轴移动-100。
（4）step():一组动画完成，例如想让本例中的文字旋转，用this.animation.rotate(360).step()，其中360就表示旋转一周360°。
代码如下：
|
Page({ data: { text: "Page animation", animation: '' }, onLoad: function (options) { }, onReady: function () { //实例化一个动画 this.animation = wx.createAnimation({ // 动画持续时间，单位ms，默认值 400 duration: 1500, timingFunction: 'linear', // 延迟多长时间开始 delay: 100, transformOrigin: 'left top 0', success: function (res) { console.log(res) } }) }, //旋转 rotate: function () { //顺时针旋转10度 this.animation.rotate(360).step() this.setData({ //输出动画 animation: this.animation.export() }) } }) |
结语
文字的动画效果远不止这一种，它可以实现很多样很丰富的形式，本篇只是一个基础的动画效果演示，后续将介绍更丰富的动画效果，欢迎持续关注。
END
编 辑 | 王楠岚
责 编 | 吴怡辰
where2go 团队
-
微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享11-22
-
怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享11-22
-
微信小程序二维码怎样解析成链接？-icode9专业技术文章分享11-22
-
微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享11-22
-
微信小程序的业务域名有什么作用-icode9专业技术文章分享11-22
-
微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享11-22
-
微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享11-22
-
微信小程序怎么实现分享样式定制和图片定制功能？-icode9专业技术文章分享11-22
-
微信小程序全栈教程：从零开始的全攻略11-20
-
微信小程序全栈学习：从零开始的完整指南11-19
-
微信小程序如何封装接口域名？-icode9专业技术文章分享11-13
-
如何在微信小程序中实现直传功能？-icode9专业技术文章分享11-13
-
如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享11-13
-
在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享11-13
-
微信小程序教程：零基础入门到实战11-01
