小程序动画循环（微信小程序动画循环播放）

本篇文章给大家谈谈小程序动画循环，以及微信小程序动画循环播放对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、小程序设置动画效果
• 2、小程序如何使用css3动画
• 3、抖音滚动字幕怎么弄 滚动字幕怎么做

小程序设置动画效果

        小程序和html页面有点不同，主要是使用js来实现动画效果，因为小程序自身有提供一种方式：wx.createAnimation(OBJECT)，它创建一个动画实例 animation ，通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性，step()来停止动画，step() 表示一组动画完成。

我们主要用wx:createAnimation({})来设置一些参数，例如持续时间、延时、加载方式等，用export()来开启动画，在页面上调用animation=”{{动画名称}}”。具体步骤：

1）创建动画对象并设置有效参数==wx:createAnimation({参数：有效值})

2）创建一组动画，调用step()来表示一组动画的完成==动画对象.动画效果.step()

3）在data中设置一个对象vip_animal(自己随意命名)，用该对象开启动画==this.setData({vip_animal: animation.export()})

4）在页面上调用动画对象== animation="{{vip_animal}}"

例子：淡入淡出动画效果（当淡入动画生效后1.5s，淡出动画开始生效）

在wxml上调用animation="{{vip_animal}}"来显示

如果需要设置循环效果。我们可以设置：（setAnimation为）

另一种方式：

在wxml上调用style="{{style_img}}"来显示

小程序如何使用css3动画

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx;  position:  relative;"/image

wxss文件

.aniamtion {

animation: mymove 5s infinite;

/* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */

}

@keyframes mymove {

from {

  /* left: 0px; */

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */

transform: rotate3d(100,200,300,0deg);

}

to {

 /* left: 200px; */

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API来实现动画

用wx.createAnimation(object) 来创建一个动画 --返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animation.step() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({

         animation:this.animation.export()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({ // 在setData({}) 导出动画数据数据给组件

         animation:this.animation.export()

})

},

完整的wxml

view class="container"

view animation="{{animation}}" class="view"

将做动画的块

/view

/view

button type="default" size="mini" bindtap="rotate"

旋转

/button

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序2.9.0 的库可用，版本不够会报this.animate不是一个方法）

textpages/index7/index7.wxml/text

view id="container" style="height: 100px; width: 100px; background-color: blue;"

container

/view

view class="block" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  this.animate('#container', [

    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  this.animate('.block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animation.css

需要做的有

从下载css动画文件

把 .css 文件 改名成 .wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的app.wxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

view class="swing" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

// 给类名为swing 的文件绑定swing 的动画

.swing{

animation: swing 5s infinite;

}

抖音滚动字幕怎么弄 滚动字幕怎么做

抖音平台上一直有一种类型的视频很受欢迎，就是有滚动字幕的文字视频。这类视频通常是文字与特效结合而成的产物，围绕一个主题，利用特效衬托文字进行表达和描述。抖音滚动字幕

制作这类视频的方法有很多，大致可以分为两种，一种是使用电脑制作，常用的软件有AE（Adobe After Effects）、Flash；还有一种就是直接用手机制作，常用的软件有 VCore美册、字说。抖音滚动字幕

相比使用电脑，用手机上的App制作文字视频更加方便、简单，我推荐大家直接使用手机。下面我们就一起来了解具体的操作过程。抖音滚动字幕

1.VCore美册音乐相册

VCore美册（以下简称美册）是一款音乐视频制作软件，可以把音乐、图片、文字等制作成一段视频。我们这里需要用到的就是它的文字制作功能。

抖音滚动字幕

❶ 单击主页下方正中的按钮进入视频编辑分类界面，选择“文字视频”进入文字视频制作界面。抖音滚动字幕

❷ 确定文字内容

可以通过语音输入或者识别直接导人音频和视频得到文字内容。这里要注意，语音识别不可能总是准确地识别出每一个字，为了确保文字的正确性，可以提前在文本框中输入语音的内容作为语音识别的参考。在语音输入或识别完成后，单击右上角的“√”图标进入下一步）。抖音滚动字幕

❸ 编辑文字

因为美册的文字视频功能自带特效，所以特效这一步就可以省略了。但刚刚也讲到语音识别可能会导致出现文字的错误，而且有的视频创作者对文字的字体和颜色也有要求，所以要对文字进行编辑加工单击暂停初始生成的视频，选择右侧蓝色的修改按钮进入文字编辑初始界面，然后可以单击文本框再单击“直接去编辑页面”按钮进入文字加工界面，进行文字的纠错、颜色的填充和字体的调整工作。抖音滚动字幕

❹ 最后的润色加工

最后就是选择文字视频的背景图、背景音乐、语音等元素。在初始生成的视频界面中，可以通过直接选择功能键进行加工。例如视频创作者可以通过单击“主题风格”或“视频背景”按钮来确定视频的背景图片等。具体的加工要根据视频创作者自身的要求来选择使用不同的功能。抖音滚动字幕

小程序动画循环的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序动画循环播放、小程序动画循环的信息别忘了在本站进行查找喔。