css创建优雅自然的打开动画

xuhong 发布于2019-08-30 13:13 / 1693人阅读

摘要：前言花了很大篇幅介绍了优雅自然的动画应该具备哪些特性。接下来，用打开一个动画的例子，来说说本人对的认识。一个最简单的打开动画，可能涉及移动和放大。最后，将两种运动的代码结合在一起就能创建优雅自然的打开动画啦。

前言

Google Material Design花了很大篇幅介绍了优雅自然的动画应该具备哪些特性。不仅仅是视觉上的观感，还能帮助提高用户界面的可用性，提升用户体验。官方文档讲的很细致，有很多典型视频示例，可惜缺少代码示例。接下来，用打开一个material surface动画的例子，来说说本人对material motion的认识。

一个最简单的打开动画，可能涉及移动和放大。在Material的世界中，斜向移动是不走直线的，运动速率是变化的，宽和高也不是同时变化的。按照Material motion的设计思想，可以列出打开动画应该具有的几个特点：

动画持续时间(duration)与运动距离有关，但要在150ms-400ms之间，过快让人感觉跟不上，过慢让人感觉反应迟钝，长距离运动时间长些，短距离运动时间短些。

在Material世界中，运动速率曲线分为四种，对于屏幕内的运动，使用标准的贝塞尔曲线。

Material元素宽高的变化是不一致的，在放大过程中，宽度变大的速度大于高度，缩小过程则相反。

Material元素移动的路径是凹弧线。

CSS代码

打开（放大）过程中宽度比高度先达到目标值，高比宽延迟开始变化；关闭过程（缩小）中，高度比宽度先达到目标值，宽比高延迟开始变化。CodePen: http://codepen.io/huangbuyi/p...

// Open
transition: width 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            height 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35m；
            
// Close
transition: width 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            height 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,

移动过程中，除了水平和竖直移动，Material元素移动路径是凹弧线。向页面下方运动是，就像是弹珠从碗边沿滚到碗里，向页面上方运动，就像弹珠从碗里滚动碗边沿。不过速度是不一样的，运动速率根据Material中的标准运动曲线，曲线是加速启动，减速停止的。CodePen:http://codepen.io/huangbuyi/p...

// 向页面下方运动
transition: left 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            top 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;
            
// 向页面上方运动
transition: left 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            top 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms;

需要注意的是，打开和关闭不要用同一套动画，向上移动和向下移动也不要用同一套动画，可以分别放在两个类中，通过改变类名，实现不同动画效果。最后，将两种运动的代码结合在一起就能创建优雅自然的打开动画啦。CodePen: http://codepen.io/huangbuyi/p...

GPU云服务器云服务器动画打开解决宝塔面板安装后创建的网站打开500错 css3动画高性能css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115393.html

CSS动画优雅降级的简单总结

摘要：转载自动画相关属性兼容性兼容性兼容性可以看到动画在这里主要讨论及以下完全不支持，由于只支持非优雅降级初始化元素动画前样式及加入动画现代浏览器下移开元素下移开元素透明元素，是元素不透明主要功臣自然是因为不支持自然会忽略掉，所以也在转载自：http://waynecz.github.io/2016... CSS动画相关属性 transition：兼容性showImg(https://...

QiShare 2019-08-23 17:07 评论0 收藏0
CSS动画优雅降级的简单总结

摘要：转载自动画相关属性兼容性兼容性兼容性可以看到动画在这里主要讨论及以下完全不支持，由于只支持非优雅降级初始化元素动画前样式及加入动画现代浏览器下移开元素下移开元素透明元素，是元素不透明主要功臣自然是因为不支持自然会忽略掉，所以也在转载自：http://waynecz.github.io/2016... CSS动画相关属性 transition：兼容性showImg(https://...

archieyang 2019-08-29 18:41 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

张金宝 2019-08-20 17:44 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 评论0 收藏0
又双叒叕是一个动态简历

摘要：标点处理根据传入的字符来判断下一个字符出现的延迟时间，即方法的第二个参数。年初的时候试着重写了这个项目，感觉已是没有什么难度了，不过也是面向过程，一顿操作罢了。先看效果请戳这里看预览这里是代码见过了？别走，这是与众不同的地方针对移动端优化了体验支持动画跳过支持多段动画标点字符特殊处理，停留时间略长于字符时间 typescript 编写对功能进行了封装处理，可以直接引入...

firim 2019-08-30 15:54 评论0 收藏0