微信小程序|旋转动画效果

本文主要是介绍微信小程序|旋转动画效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题描述

在小程序中，如果可以用一个动画效果展现一句话或一段文字，会比普通文字呈现更具吸引力，这不仅是体现更多样的文字效果，更是突出这段文字的一个方法。那么接下来就来看一下如何实现一个文字旋转的动画效果吧。

效果图：

解决方案

1  wxml：

这部分很容易实现，只需要设置一个点击旋转标签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°。

代码如下：

结语

文字的动画效果远不止这一种，它可以实现很多样很丰富的形式，本篇只是一个基础的动画效果演示，后续将介绍更丰富的动画效果，欢迎持续关注。

END

编  辑   |   王楠岚

责  编   |   吴怡辰

 where2go 团队

这篇关于微信小程序|旋转动画效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！