问题

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

效果图：

方法

1. wxml：

这部分很容易实现，只需要设置一个点击旋转标签button以及对一条需要旋转的文字进行数据绑定即可。

<view>

<view animation="{{animation}}">我在做动画</view>

</view>

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()

})

}

})

结语

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

微信小程序实现旋转动画效果相关推荐

微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现
[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 本文共有两个示例,先上图示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({container ...
微信小程序实现波浪动画效果
目录注效果图代码 .wxml .wxss 素材注波浪效果的素材来自小程序开源组件库ColorUI 效果图代码 .wxml <view class="header" ...
微信小程序水波纹动画效果
水波波动效果实现,复制查看效果 wxml <view class="circle"><view class="positionNumber"& ...
mpvue微信小程序动画_微信小程序MPvue实现动画效果
export default { data() { return { animation1: {}, animation2: {}, animation3: {}, stretch: false, / ...
微信小程序签到弹窗(动画效果)
效果图如下所示图片素材:https://pan.baidu.com/s/1FGT8XANYO5PbzjE_QPfJ3w 提取码: kgv6 .wxml <button bindtap=&quo ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
微信小程序登录页动画-云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 当我看到这张背景图的时候, ...

微信小程序实现旋转动画效果

问题

方法

结语

微信小程序实现旋转动画效果相关推荐

最新文章

热门文章