【微信小程序—动画工坊】动画入门keyframe
【微信小程序—动画工坊】动画入门
前情
需要了解的前置知识:
- 子代选择器
- 基本布局
分析
可以将任务进行一下拆分。
如何让小球跑动起来?
通过@keyframe创造动画函数,然后再通过animation绑定创造动画函数
@keyframe的百分比代表动画的进度,0%代表动画的起点,100%代表动画的终点,如果有多个相同的位置,可以多个时间点合并设置。
怎么控制动画的走向?
使用transform:translate函数
transform:translate(a,b)
,代表元素等会要移到距离起点位置右方a个距离和下方b个距离的位置。如何控制动画的快慢?
在animation里面我们可以设置动画的周期,如果我们给的周期越短,意味着动画要完成得越快,反之同理。
animation: 6s;
如何使动画无穷无尽地进行下去?
animation: infinite;
如何使小球平滑地跑动起来?
在animation中添加ease属性
如何使得画出小球?
先画出一个正方形,然后这样子设置
border-radius: 100%;
代码文件
- wxml
<view class="container"><view></view><view></view><view></view><view></view>
</view>
- css
page{display:flex;justify-content: center;align-items: center;height: 100vh;background-color: black;
}.container{position: relative;width: 200px;height: 200px;
}.container view{position: absolute;width: 40%;height: 40%;border-radius: 100%;background-color:#ffffff;animation: loading 6s infinite ease;
}.container :first-child{animation-delay: 1.5s;
}.container :nth-child(1){animation-delay: 2.0s;
}.container :nth-child(2){animation-delay: 3s;
}.container :nth-child(3){animation-delay: 5s;
}@keyframes loading{0%,100%{transform: translate(0,0);}20%{transform: translate(100px,100px)}40%{transform: translate(-100px,-100px);}60%{transform: translate(-100px,100px);}80%{transform: translate(100px,-100px);}
}
【微信小程序—动画工坊】动画入门keyframe相关推荐
- 微信小程序开发(四)入门之打卡功能开发
相关文章 微信小程序开发(一)微信开发者工具以及小程序框架介绍 微信小程序开发(二)开发之日历打卡小程序发现页 微信小程序开发(三)入门之创建打卡活动 前言 本篇文章将介绍打卡小程序打卡页面相关功能的 ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 微信小程序开发(三)入门之创建打卡活动
相关文章 微信小程序开发(一)微信开发者工具以及小程序框架介绍 微信小程序开发(二)开发之日历打卡小程序发现页 微信小程序开发(四)入门之打卡功能开发 前言 上篇介绍了日历打卡小程序发现页视图相关开发 ...
- 【微信小程序创作之路】-入门
[微信小程序创作之路]-入门 第一章 微信小程序历史.简介.开启创作之路 文章目录 [微信小程序创作之路]-入门 前言 一.小程序的简介 二.小程序的历史 三.小程序优势 1.使用门槛低 2.快速开发 ...
- wx-wow微信小程序实现wow.js功能(微信小程序动效库)
该项目为提供微信小程序一套便捷好用的动画执行方案, 通过添加简单的动画类名和一些简单的参数,即可实现想要的动画效果.灵感来源 WOW.js wx-wow 需要 调试小程序基础库 >2.5 先附上 ...
- 微信小程序开发手账从入门到部署【持续更新】
微信小程序开发手账 从今天起,打算记录一下自己从入门开发微信小程序到小程序上线的完整流程. 如果没有意外的话打算每周更新一次.20201231 准备工作 hbuilder.java环境(springb ...
- 记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要 最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
- 微信小程序各种酷炫动画
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/anda0109/article/de ...
- 微信小程序实现svga格式动画播放
现在微信小程序风靡大燥,很多软件公司和企业都针对小程序进行了各种开发,本着微信小程序简单易用,无需安装的特点,深受很多用户的喜爱. 当下又是直播行业的鼎盛时期,直播带货功能如今已经非常完善,那么,对于 ...
最新文章
- 今日 Paper | 多人姿势估计;对话框语义分析;无监督语义分析;自然语言处理工具包等
- JAVA学习day05
- const char * 、char const *、 char * const 三者的区别
- NYOJ 201 作业题
- 遍历flex和flash对象的属性和方法
- [COGS746] [网络流24题] 骑士共存
- linux从新手到高手,1.3 养成良好的Linux操作习惯免费阅读_循序渐进Linux(第2版) 基础知识 服务器搭建 系统管理 性能调优 虚拟化与集群应用免费全文_百度阅读...
- vmware-设置共享文件夹
- ReportViewer教程(15)-矩阵报表-1
- linux无缝升级的版本,Angular 1 和 Angular 2 集成:无缝升级的方法
- 高质量C /C编程指南---序言
- 畅玩4x 刷linux,荣耀4x如何root
- 入手 M1 Mac 之前,你可以通过这个工具了解常用软件兼容性
- SQLite数据库存储数据
- 华为鸿蒙系统有广告吗,系统特权?华为鸿蒙被曝看视频能免广告,没正式发布就出bug...
- php 批量导入表格,织梦dedecms批量导入excel表文章内容插件
- html5小猫钓鱼游戏思路,小猫钓鱼的游戏算法
- 辽宁大学广播影视学院电影专硕考研上岸经验分享
- Pytorch(gpu),cuda,cudnn安装
- workflow了解
热门文章
- python 批量移动文件_[Python] 自动化办公 批量命名和移动文件
- Lyx使用bib插入参考文献
- mysql 导入数据 1215_在用Navicat for MySQL给MySQL中的数据表单添加外键以及主键出现的1215错误...
- 射频基础:三种接收机的介绍
- linux的tar zcvf,xvf的区别
- 学会了 Vim 还有必要用 GitHub Atom 或者 Sublime Text 么?
- 50道逻辑题,你能想出多少?
- C#关于日期 月 天数 和一年有多少周及根据某年某周获取时间段的计算(转)
- 实时查询引擎 - 介绍总结
- 电脑自动录屏软件哪个好用 电脑自动录屏怎么设置