微信小程序 小程序制作及动画（animation样式）详解

微信小程序制作及动画攻略

微信小程序是一种轻量级的应用，由于其小巧、简单易用，已成为颇受欢迎的开发工具。其中，动画效果对于小程序的视觉体验有很大的提升，本攻略主要介绍小程序制作及动画（animation样式）的详解。

小程序制作

1. 新建小程序页面

• 首先打开微信开发者工具，进入项目页面。
• 左侧导航栏中找到pages文件夹，右键选择新建页面，设置页面名称、路径。

2. 页面结构

• 小程序页面遵循WXML（WeiXin Markup Language）语言规范编写，HTML标签不全，但语法相似。
• 可以定义组件、数据绑定、事件绑定等功能。

3. 样式设计

• WXML支持的CSS样式不同于浏览器的CSS，但支持类、ID选择器等基本CSS样式。

动画效果

小程序提供了animation样式，可以制作出丰富的动画效果。

1. 基本动画示例

animation: name duration timing-function delay iteration-count direction fill-mode;

• name：动画名称，在wxss中定义。
• duration：动画期间时间，单位为秒。
• timing-function：动画效果，可选值：linear,ease,ease-in,ease-in-out,ease-out。
• delay：动画延迟时间，单位为秒。
• iteration-count：动画播放次数，infinite表示无限次播放。
• direction：动画方向,可选值：normal,alternate,alternate-reverse。
• fill-mode：动画结束后的状态。

【动画示例1：】移动动画效果

在.wxss文件中定义以下代码：

.step {
    position: absolute;
    bottom: 10rpx;
    left: 40rpx;
    animation: move 2s linear 0s infinite alternate;
}

@keyframes move {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20rpx);
    }
}

在.wxml文件中引入：

<view class="step"></view>

可以实现下落跳动的动画效果。

【动画示例2：】旋转动画效果

在.wxss文件中定义以下代码：

.rotate {
    width: 80rpx;
    height: 80rpx;
    background-color: #f00;
    border-radius: 50%;
    animation: rotate 2s linear 0s infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

在.wxml文件中引入：

<view class="rotate"></view>

可以实现以圆圈为中心不停旋转的动画效果。

结语

小程序制作及动画（animation样式）详解这里介绍了微信小程序的制作、页面结构和样式选择等内容，同时还提供了两个简单的动画示例。通过学习这些知识，我们可以轻松制作出漂亮且富有动感的小程序。