小程序设置动画效果

        小程序和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}}"来显示

一个小程序页面由四个文件组成，分别是：js

页面逻辑 、wxml

页面结构 、wxss

页面样式表 、json

页面配置 。把样式宝贝到当前页面同名的.wxss文件里面就可以了

微信小程序的字体颜色可以使用CSS属性color来进行设置。

1. 首先，在wxml文件中，使用<style>标签来设置样式。

2. 在样式表中使用color属性，然后设置字体颜色。

例如，设置文字为红色：

```

<Style>

.red-text {

color: #ff0000

}

</Style>

```

3. 在页面中，将要设置颜色的文字标签使用class属性来关联对应的样式类。

例如，将一个文字标签设置为红色：

```

<Text class="red-text">这段文字将会显示为红色。</Text>

```

注意：#ff0000表示红色的十六进制颜色值。更多的CSS样式可以参考CSS手册。

---