小程序 - 罗盘动画

微信小程序常用API练习 - 罗盘动画小程序开发笔记

目录

罗盘动画

功能描述

准备工作

创建项目

配置页面

配置导航栏

项目目录结构

实现页面结构

实现页面逻辑

实现页面样式

功能截图

总结

---

罗盘动画

功能描述

在微信小程序中，开发者根据项目需求，可以在页面中添加一些动画效果，例如旋转、缩放、移动等，通过这些动画效果可以提高用户体验。下面以“罗盘动画”微信小程序为例，讲解微信小程序中动画效果的制作。

准备工作

在开发前，需要先完成一些准备工作，主要包括创建项目、配置页面、配置导航栏和复制素材，具体步骤如下。

创建项目

在微信开发者工具中创建一个新的微信小程序项目，项目名称为“罗盘动画”，

模板选择“不使用模板”。

配置页面

项目创建完成后，在app.json文件中配置一个compass页面。

具体代码如下：

"pages": [
    "pages/compass/compass"
],

配置导航栏

在pages/compass/compass.json文件中配置页面导航栏。

具体代码如下：

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"
    },
    "navigationBarTitleText": "罗盘动画"
}

项目目录结构

上述步骤操作完成后，​“罗盘动画”微信小程序的目录结构如下图所示：

至此，准备工作已经全部完成。

实现页面结构

在pages/compass/compass.wxml文件中编写“罗盘动画”微信小程序的页面结构，

具体代码如下：

<!--pages/compass/compass.wxml-->
<navigation-bar title="罗盘动画" back="{{false}}" color="black"></navigation-bar>

<!-- 图片区域 -->
<view class="anim-pic">
    <image src="/images/img.png" animation="{{ animation }}" />
</view>
<!-- 按钮区域 -->
<view class="anim-btns">
    <view>
        <button bindtap="rotate">旋转</button>
        <button bindtap="scale">缩放</button>
        <button bindtap="translate">移动</button>
        <button bindtap="skew">倾斜</button>
    </view>
    <view>
        <button class="btn-two" bindtap="rotateAndScale">旋转并缩放</button>
        <button class="btn-two" bindtap="rotateThenScale">旋转后缩放</button>
    </view>
    <view>
        <button class="btn-two" bindtap="all">同时展示全部</button>
        <button class="btn-two" bindtap="allOrder">按顺序展示全部</button>
    </view>
    <view>
        <button class="btn-reset" bindtap="reset">回到原始状态</button>
    </view>
</view>

 

实现页面逻辑

在pages/compass/compass.js文件的Page({})中编写页面数据和事件处理函数，

实现点击“旋转”​“缩放”等不同按钮操作罗盘的功能，

具体代码如下：

// pages/compass/compass.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        animation: {}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        // 创建一个动画实例animation
        this.animation = wx.createAnimation({
            // 动画持续时间为1000毫秒
            duration: 1000,
            // 动画以低速开始，然后加快，在结束前变慢
            timingFunction: 'ease',
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
    // 实现从原点随机旋转某一个角度的效果
    rotate: function () {
        this.animation.rotate(Math.random() * 720 - 360).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 图片随机缩放效果
    scale: function () {
        this.animation.scale(Math.random() * 2).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 平移变换效果
    translate: function () {
        this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 实现对象相对x,y轴随机倾斜
    skew: function () {
        this.animation.skew(Math.random() * 90, Math.random() * 90).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 同时旋转和缩放
    rotateAndScale: function () {
        this.animation.rotate(Math.random() * 720 - 360)
        this.animation.scale(Math.random() * 2).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 实现旋转之后缩放效果
    rotateThenScale: function () {
        this.animation.rotate(Math.random() * 720 - 360).step()
        this.animation.scale(Math.random() * 2).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 同时展示所有动画
    all: function () {
        this.animation.rotate(Math.random() * 720 - 360)
        this.animation.scale(Math.random() * 2)
        this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
        this.animation.skew(Math.random() * 90, Math.random() * 90).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 按顺序展示全部动画
    allOrder: function () {
        this.animation.rotate(Math.random() * 720 - 360).step()
        this.animation.scale(Math.random() * 2).step()
        this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
        this.animation.skew(Math.random() * 90, Math.random() * 90).step()
        this.setData({
            animation: this.animation.export()
        })
    },

    // 动画回到初始状态
    reset: function () {
        this.animation.rotate(0).scale(1).translate(0, 0).skew(0, 0).step({
            duration: 0
        })
        this.setData({
            animation: this.animation.export()
        })
    }
})

 

实现页面样式

在pages/compass/compass.wxss文件中对页面样式进行设置，

具体代码如下：

/* pages/compass/compass.wxss */
.anim-pic {
    width: 100%;
    text-align: center;
}

.anim-pic image {
    width: 60%;
}

.anim-btns view {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

/* 按钮区域每一行中每个按钮的样式 */
.anim-btns > view > button {
    flex-basis: 25%;
    /* 控制盒模型的尺寸计算方式 */
    /* 弹性布局，默认是水平方向 */
    align-items: center;
    /* 交叉轴居中 - 垂直居中 */
    justify-content: center;
    /* 主轴居住 - 水平居中 */
    border: 1px solid #fff;
}

.anim-btns > view > .btn-two {
    flex-basis: 45%;
}

.anim-btns > view > .btn-reset {
    flex-basis: 80%;
}

功能截图

总结

微信小程序常用API练习 - 罗盘动画小程序开发笔记