让按钮“呼吸”一会（呼吸动画）

什么是「呼吸」动画？看下图。

我们今天实现图二中的动画。做动画两步法，第一步：分析：

打开这张 gif 图，观察所有帧的变化：

你会发现其实原理很简单就是不断地做缩放操作。

第二步，使用动画工具实现。由于我没有一个礼物的设计图，我用另一张图代替一下。

首先放一张图片：

给图片加一个放大缩小的动画：

如果在小程序中使用：

如果在前端中使用：

到此今天的动画就算做完了，主要利用了昨天的知识跳动的音符动画实现原理剖析。今天的新知识是 transform。

transform 可以对某个元素进行缩放、形变、位置移动、旋转等操作，配合 animation 和 @keyframes 来实现各种动画。先看一 CSS 的属性 scale。

scale 通过一个缩放比例来缩放一个元素，当比例大于 1 时表示扩大，小于 1 时表示缩小。可以这样使用：

scale 1: 不缩放；

scale 1.2：x 和 y 轴都扩大 1.2 倍；

scale 1.2, 1.5：x 轴扩大 1.2 倍，y 轴扩大 1.5 倍；

scale 1.2, 1.5, 1.4 ：x 轴扩大 1.2 倍，y 轴扩大 1.5 倍，z 轴扩大 1.4 倍；

今天例子中使用的是 scale 函数，它不同于 scale 属性。

scale() 仅适用于在二维平面上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。

设计稿来源于：https://lottiefiles.com/search?q=breath&category=animations&animations-page=1

动画效果的 demo 我上传到了：

https://github.com/lefex/FE/tree/master/animation/animation。

大家加油！

推荐阅读：

学习前端的 7 个专题

让按钮“呼吸”一会（呼吸动画）相关推荐

android 中间按钮突出,Android 实现按钮从两边移到中间动画效果
Android 实现按钮从两边移到中间动画效果html package org.shuxiang.test; import android.app.Activity; import android. ...
像呼吸空气一样呼吸创意
我们正在经历一场深刻的革命,这场思想与行动的革命,彻底颠覆了旧时代的生意方式.消费方式和生活方式,一种全新的理念和"看不见的手",像玩魔方一样重构着世界的秩序.无论身处哪个角落,你 ...
confirm修改按钮文字_踏入MG动画设计的门，才知道文字动画这么重要……
和大多数影视后期一样,在MG动画的制作中,文字也担负着重要的角色,除了对画面信息的补充和媒介交流,也是设计师们常用来作为视觉设计的辅助元素. After Effects作为MG动画设计师主要的设计软件 ...
以下服务器系统运用呼吸,一种呼吸训练系统
主权项: 一种呼吸训练系统,其适用于慢性阻塞性肺疾病的康复训练,所述呼吸训练系统包括服务器端装置和客户端装置,所述服务器端装置包括服务器端通信部件.服务器存储部件.服务器显示部件.服务器输入部件和服务 ...
html5 呼吸灯效果,呼吸灯.html · 在下小豪/团队协作APP_frontend - Gitee.com
呼吸灯 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; } ...
android按钮最底,Android：点击按钮后布局上的动画,最低SDK版本为14
看看 Circular Reveal from touch point: @Override public boolean onTouch(View view,MotionEvent motionEv ...
qq自定义diy名片代码复制_「正点原子FPGA连载」第六章自定义IP核-呼吸灯实验
1)摘自[正点原子]领航者 ZYNQ 之嵌入式开发指南 2)实验平台:正点原子领航者ZYNQ开发板 3)平台购买地址:https://item.taobao.com/item.htm?&id= ...
FPGA项目三：PWM呼吸灯
文章目录第一节项目背景第二节设计目标第三节设计实现 3.1顶层设计 3.2 信号设计 3.3 信号定义第四节综合和上板 4.1 新建工程 4.2 综合 4.3 配置管脚 4.4 再次综 ...
arduino 呼吸灯_如何改善您的Arduino呼吸机：用于临时COVID-19呼吸机设计的RTS和SCS简介...
arduino 呼吸灯 The world as we know it was recently taken by storm. That storm was the outbreak of the ...
【Verilog HDL 训练】第 10 天（PWM 呼吸灯）
5月8日 PWM 用verilog实现PWM控制呼吸灯.呼吸周期2秒:1秒逐渐变亮,1秒逐渐变暗.系统时钟24MHz,pwm周期1ms,精度1us. 今天的题目我是第一次见,答案借鉴大神的:Veril ...

让按钮“呼吸”一会（呼吸动画）

让按钮“呼吸”一会（呼吸动画）相关推荐

最新文章

热门文章