小程序设置动画效果

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

可以通过在 uni-table 组件上绑定 v-for 来实现不同行的颜色变化。

步骤如下：

1.定义 data 属性，其中 colorArr 存放的是颜色字段：

data () {

return {

list: [],

colorArr: ['#f00', '#0f0', '#00f', '#fff']

}

},

2.在 uni-table 组件上绑定 v-for

<uni-table-column v-for="(item, index) in row.list"

:key="index"

:type="item.type"

:label="item.label"

:width="item.width"

:align="item.align"

:show-overflow-tooltip="item.showOverflowTooltip"

:class="['cell-type-'+item.type, {'bg-light': row.type=='light'}]"

:style="{backgroundColor: colorArr[index]}"

>

{{ item.value }}

</uni-table-column>

上述代码在 uni-table 组件上绑定 v-for 来循环 list，在 uni-table-column 标签上传递行索引index 即可动态改变单元格的背景颜色。另外，也可以给 uni-table-column 标签设置其他的样式。

一、需求：

swiper组件缩小后需要完全居中。

二、实现方案：

一种方式是flex居中，但我调试后效果不行；还有一种就是绝对定位，使用left 50%，这种我调试也不居中；还有一种就是计算屏幕宽度和swiper宽度，绝对定位后left=(屏幕width-swiper width)/2,本文介绍最后一种实现方式。

三、程序实现

3.1 js文件

data声明变量

onload时计算参数值

3.2 wxss文件

使用绝对定位，left使用变量，格式： var( --变量名--)

3.3 wxml文件

swiper外用一个view组件，并使用变量，格式：style="--left--:{{动态变量}}px"

四、实现效果

---