安卓动画入门_网络动画入门
安卓动画入门
无论您是刚刚开始使用基础知识还是想探索更高级的技术,我们已经构建了完整的指南来帮助您学习CSS和为CSS 设置动画 。
网络动画入门
近年来,Motion已成为Web设计领域中非常重要的部分。 运动和动画在界面上增加了层次,可以帮助用户,在整个过程中提供反馈,令人愉悦和参与。
在本文中,我将通过简单的过渡,更复杂的动画和有用的资源,逐步介绍学习网络动画的所有步骤。 将会有一些实用的互动练习来向您介绍要点。 到最后,您将对当前的Web动画景观以及如何掌握它有一个扎实的了解。
我们将关注以下内容:
- 什么,为什么?
- CSS过渡
- CSS关键帧动画
- 真实动作
- 三次贝塞尔函数(定时)
- CSS库和工具
- SVG
- JavaScript
- 原型制作
什么,为什么?
Web设计学科日新月异,近年来出现的一个方面就是动画能力。 浏览器变得越来越强大,处理器速度越来越快,手持设备已经为“手势”铺平了道路。 滑动,捏紧并用力触摸。
Motion为界面提供了许多可改善用户体验的功能,包括:
- 因果关系 :强调行动和React,一件事引起另一件事。
- 反馈 :告诉用户他们已成功(或未成功)完成某项操作,例如单击某项或输入表单数据。
- 进步 :说明一件事情跟着另一件事情发生,串联加载中的事件-旋转棒是一个很好的例子。
- 愉悦 :好的设计通常被认为是不可见的,但是执行得当的动作可以真正使您的用户满意并吸引他们。
Motion改善了用户体验,并为网络带来了活力。 考虑到所有这些,作为界面设计师,重要的是要考虑动画。 让我们开始做基础!
学习资源
- 为什么要设置动画? 由多诺万·哈钦森(Donovan Hutchinson)
- Rachel Nabors创作的网络动画
CSS过渡
CSS过渡通常是Web设计人员进入运动世界的门户。 它们指示浏览器采用元素的初始状态,然后采用结束状态,并在两者之间平稳过渡。 语法相对直接,包含四个属性和一个缩写形式:
transition-property
transition-duration
transition-timing-function
transition-delay
让我们从一个按钮开始。 在这个例子中,我们有一个带有一些基本样式的按钮,使它看起来好像是从页面上抬起的一样。 默认情况下,如果将鼠标悬停在它上面,它将更改颜色。 然后,如果您单击它,它似乎被向下推。 我们使用background
, position-top
和position-left
属性来完成此操作,但是每种情况下的更改都是瞬时的:
现在,通过向.button
元素添加transition
效果,使效果更微妙。 例如,添加transition: all 1s;
将确保所有属性更改将在1秒钟内平稳过渡。
在CSS窗格中取消注释第一条规则,您将看到它生效:
现在您已经看到了这项工作,请尝试取消注释第二条规则。 在第二个示例中,我们分别列出了每个更改的属性,因此我们可以为每个属性定义不同的过渡速度。
最后,尝试取消对第三个示例的注释,在该示例中您还将看到我们还添加了计时功能 。 这些都会影响过渡速度-我们将在短期内详细讨论。
学习资源
- 通过CSS过渡启动并运行
CSS关键帧动画
随着CSS过渡的到来,现在是时候将其提升一个级别了。 CSS关键帧动画提供了更多控制权,使您可以在整个时间轴上指定更改。 关键帧动画需要两个步骤; 自己定义关键帧,并将动画分配给您选择的元素。
假设我们从一个球开始。
现在我们可以定义一些关键帧,设置一个from
状态和一个to
状态。 在这里,我们说它的left
位置属性将从5%开始,动画到85%,从而有效地使球在屏幕上移动。
@keyframes move {
from {
left: 5%;
}
to {
left: 85%;
}
}
您可以看到我们在@keyframes
声明中嵌套了from
和to
。 并且我们将动画move
命名为。 现在我们需要将此动画分配给我们的球,我们这样做:
.ball {
animation: 1s move;
}
这是以其最简单的速记形式实现的。 我们需要定义动画要持续多长时间,以及我们要应用哪个动画。 现在,当我们加载演示时,您将看到动画生效:
注意 :动画会在页面加载时开始播放,因此您需要点击此嵌入式笔一角的重新运行按钮以查看发生了什么。
更多控制
超越简单的from
和to
阶段,我们可以定义点一直使用百分比的时间表。 使用0%和100%将为我们提供与之前完全相同的结果:
@keyframes move {
0% {
left: 5%;
}
100% {
left: 85%;
}
}
让我们在中间添加一个额外的步骤,并将球带回到起始位置。 我们还将使动画迭代计数为infinite
,从而使其不断循环播放。 编辑下面的笔中的值,然后看它们生效:
可以将多个动画添加到单个元素,更改动画方向,并完全更改时间。 查看这些资源以了解更多信息!
学习资源
- 使用CSS关键帧动画启动并运行
- CSS动画入门
- Val Head CSS动画口袋指南
- UI动画通讯
真实动作
运动使静态物体栩栩如生,而真正的运动可以使它产生巨大的变化。 运动赋予物体质量,将其放置在空间中,并且现实世界中的物理学突然应用于该物体。 如果一个物体以我们熟悉的方式移动,我们就更有可能建立起最重要的情感联系。 圆上下移动和球跳动之间的区别是:
两者之间的区别很明显(尽管反弹远非完美)。 学习如何赋予动画真实性至关重要。
“大多数自然动作都倾向于遵循弓形的轨迹,动画应遵循这一原则,遵循暗示的“弧度”以实现更大的真实感。” – 动画十二个基本原理
学习资源
- Google的《材料设计指南》中的实质性议案
- 在网络上的动画中增加吸引力
- 迪士尼的动画十二个基本原理
三次贝塞尔函数(定时)
我们已经在本文中讨论了两次“放松”; 它是事物移动的速率,可以表示为沿两个轴的曲线。 在CSS中,有一些内置的计时功能可以与它们的关键字一起使用( linear
, ease-in
, ease-in-out
等),但是您可以使用三次方贝塞尔函数更精确地描述这些计时,看起来像这个:
随着时间沿x轴不断移动,移动速度沿y轴加快和减慢。 上面的示例用于我们之前的弹跳球; 您可以想象球快速向上移动,然后在到达顶点时变慢。 在cubic-bezier.com上查看此曲线以帮助您可视化它。
曲线由两个控制柄控制(如果您曾经在Adobe Illustrator或Sketch中使用过钢笔工具 ,将会很熟悉),并且我们可以在CSS中使用的三次贝塞尔曲线功能可以反映这些控制柄。 因此,我们的函数如下所示:
cubic-bezier(.1,.25,.1,1)
有四个值,每个值的范围从0到1(出于论证目的)从0到1。它们表示:
- 手柄1(.1)的x坐标
- 手柄1的y坐标(.25)
- 手柄2(.1)的x坐标
- 手柄2(1)的y坐标
了解贝塞尔曲线功能如何工作将极大地改善您的动画效果,尤其是在您要实现真实运动的情况下。
学习资源
- 简化三次贝塞尔函数
- cubic-bezier.com由利·贝罗
- easings.net ,作者:Andrey Sitnik
CSS库和工具
手工编写漂亮CSS动画可能很困难,但是有许多可用的库可以帮您完成繁重的工作。 Dan Eden的Animate.css是一个样式表,其中填充了基于关键帧的动画,所有动画均具有自定义类名,可供使用。
学习资源
- 从上到下学习Motion UI
- 快速提示:通过Animate.css使您的网站栩栩如生
更多CSS库
- 魔术动画
- DynCSS
- CSS摇
- 悬停
SVG
近年来,SVG(可缩放矢量图形)已成为Web设计师的最佳朋友,它为我们提供了清晰的图形,更浅的页面和可设置动画的元素。 我们已经讨论过的一些内容可以直接应用于SVG元素,但是许多属性的行为有所不同。
这是一个嵌入式SVG,在悬停时对其颜色应用了过渡。 但是,您会注意到我们使用的是fill
属性,而不是HTML元素所期望的background-color
:
SVG可以使用CSS进行动画处理,就像我们在本文其余部分中讨论的一样。 如果可以使用HTML进行转换或翻译,则可以使用SVG进行相同的处理。
但是SVG也可以通过SMIL( 同步多媒体集成语言 )进行操作,该语言允许您直接在SVG内部使用<animate>
元素之类的东西。 看看这个SVG圈子,可以在屏幕上切换:
这是一个圆圈,其中包含一个<animate>
指定要动画的属性(在本例中为cx
坐标),从50px到400px的位置,持续时间为2秒,并无限重复。
<circle cx="0" cy="50" r="50" fill="#2098d1">
<animate attributeName="cx" from="50" to="400" dur="2s" repeatCount="indefinite" />
</circle>
SMIL是一套非常强大的工具,请从下面开始阅读!
学习资源
- 如何将“ animateTransform”用于嵌入式SVG动画
- SVG动画指南(SMIL) ,作者:Sara Soueidan
- 使用Snap.svg制作动画
- 在虚线上签名:动画自己的SVG签名
喜欢动画SVG的想法,但不确定要制作什么动画? 在Envato Studio上查看矢量插图服务 ,看看有什么优惠!
JavaScript
许多前端开发人员通过在网页上添加动画来首先使用JavaScript(或jQuery)。 浏览器对CSS替代品的支持是粗略的,而JS是一个不错的选择。
jQuery的UI库附带了许多现成的UI帮助器,包括effect()
方法,如下所示(从下拉列表中选择一个效果,并观察将其应用于内容的效果:
除此之外,JavaScript的(在右手,不是我)能提供严重的动画,而且由于的Adobe Flash在其辞职正式移交了一些辉煌JavaScript库已经出现。 GreenSock的动画平台(GSAP)可以说是功能最强大的工具,它为开发人员提供了大量基于时间轴和补间的工具。
看看我们的初学者课程 ,看看您如何使用GSAP!
学习资源
- GreenSock动画平台:第一步
- 带有GSAP插件的高级动画
原型制作
静态设计交付物已经足够的日子已经一去不复返了-图像和流程图无法传达足够的信息。 如今,精明的客户希望看到并感受您的设计,体验机芯,这就是为什么原型能回答更多问题的原因。
“如果一张图片价值1000字,那么一个原型价值1000次会议。” — @ ideo说
— John Maeda(@johnmaeda) 2014年10月5日
原型可能是原始的,也可以相当准确地反映出最终产品,但是无论它们落在这个规模上的什么地方,都需要提高效率。 在涉及动作和动画的地方,有许多应用程序可以帮助您交流设计。
Adobe Animate是下一代Flash,提供高级动画工具。 Adobe After Effects是一种视频制作工具,但还提供了基于时间轴的高级运动。 但是,还有一些更简单的应用程序,例如适用于Mac的Principle,甚至是Keynote:
一旦运动设计成为您所做工作的一部分,找到最好的工具向世界展示是重要的一步!
学习资源
- Mac原理运动设计
- 使用Hype 3的基于时间轴的Web动画
- 如何对Web动画原型使用After Effects
- 琳达·董的主题运动图形实验
结论
我们终于得到它了! 本指南应该使您对当今的Web动画格局有深入的了解。 掌握了所有这些学习资源后,您将获得一套全新的技能来探索运动设计的世界。
希望你觉得它有用。 请在下面的评论或Envato社区论坛中分享您自己的技巧和资源。
翻译自: https://webdesign.tutsplus.com/articles/get-started-with-web-animation--cms-26848
安卓动画入门
安卓动画入门_网络动画入门相关推荐
- python六小时网络爬虫入门_一小时入门 Python 3 网络爬虫
原标题:一小时入门 Python 3 网络爬虫 作者:Jack-Cui,热爱技术分享,活跃于 CSDN 和知乎,开设的<Python3网络爬虫入门>.<Python3机器学习> ...
- fiash星空动画制作_三维动画制作的详细流程
三维动画制作的详细流程: 随着互联网的发展,三维动画技术更新,三维动画制作技术在生活中运用十分广泛,我们经常在一些电视广告,影视电影中会看到一些三维特效,因为震撼的真实感很受大众喜欢.三维动画技术让视 ...
- [转载] 随机游走和随机重启游走_网络动画API的随机游走
参考链接: 随机游走(Python实现) 随机游走和随机重启游走 I'm currently writing a demo that will use a small repeated random ...
- 服务器和交换机物理连接_网络交换机入门指南
网络交换机的知识点非常多,我们较为简单的方式梳理一下,如果题主对某一个知识点感兴趣,可以进一步了解. 一.网络交换机的定义 这边我们将以通俗的方式介绍一下,随着网络上大量用户和程序以及服务器的出现,导 ...
- python最简易入门_零基础入门python,用最简单的方式即可入门python,没有那么复杂...
python已经开始被越来越多的人喜欢,其中有很多是从未学习过编程的人,那么,如果是从零开始学python的话,会很难吗? 其实从零开始学python并不会很难,最简单的方法,往往最有效果,无论你是否 ...
- 数据分析师入门_数据分析师入门基础指南
数据分析师入门 Back in the summer of 2018, I was just starting my first internship as a Data Analyst. 早在201 ...
- svg动画制作_制作动画SVG横幅
svg动画制作 I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped ...
- powershell 入门_使用PowerShell入门的5个Cmdlet
powershell 入门 PowerShell is quickly becoming the preferred scripting language and CLI of Power Users ...
- apache phoenix 入门_实现Phoenix入门
快速入门 Phoenix是一个开源的HBASE SQL层.Phoeinx可以用标准的JDBC API替代HBASE client API来创建表,插入和查询查询HBASE中的数据. Phoenix作为 ...
最新文章
- 爱立信将在加拿大建立人工智能实验室
- hashMap与arrayList,linkedList,hashTable的区别
- 拉格朗日乘数法学习笔记
- stm32 IOT_基于STM32平台的cubeMX和HAL库详解
- [ST2017] Lab1: Triangle type and Junit test
- 在Outlook 2007中查看您的Google日历
- git eclipse 取消误操作 ignore(忽略)文件
- c# lu分解的代码_LU分解(1)
- 使用vagrant快速创建Linux(centos/7)
- 论文笔记_S2D.44_自监督的从稀疏到稠密:用激光雷达和单目摄像机进行自监督深度补全
- HBuilder与夜神模拟器
- mathematica7.0 汉下载及汉化
- 三点估算法_三点估算
- 集成OpenLDAP与Kerberos实现统一认证(二):基于SSSD同步LDAP账号
- 黑客利用WordPress 插件暗中建立后门网站
- jq动态改变路径_在react中使用jQuery动态更改图片路径遇到的问题
- 响应式织梦模板日化食品零食类网站
- JAVA学习日记每天进步一点点之集合类
- Ubuntu安装百度云(百度云终于出linux版本了)
- C语言:用switch,case函数,做一个自动售卖机
热门文章
- 如何删除开机自启动的病毒
- 看文献写论文好用的一些软件或者网页或者插件
- excel两个指标相关性分析_Excel-散点图(相关性及数据分布)分析
- matlab里面接地咋找,MATLAB求解接地金属槽内电位分布
- lambda表达式赘述
- Ubuntu22.04安装与配置记录
- TFN TD11M 观察手用 手持式热像仪双光谱 双光谱测距热成像仪
- 实训项目日志(一)——剧本规划
- python之父头发对比图_【发型前后对比】2021剪头发图鉴,换发型简直就是换一张脸!...
- JavaEE笔记——快递管理系统架构