锡林郭勒盟网站建设,品牌推广方式都有哪些,设计方案文案,自己做的网站怎么添加文档为什么要制作动画#xff1f; 现在的营销活动#xff0c;用一个很简单的图片去吸引消费者已经远远不够。想让消费者创造GMV#xff0c;肯定需要让消费者觉得眼前一亮或是有视觉冲击的东西#xff0c;或者在动画过程中提供更好的引导部分#xff0c;比如红包#xff0c;引… 为什么要制作动画 现在的营销活动用一个很简单的图片去吸引消费者已经远远不够。想让消费者创造GMV肯定需要让消费者觉得眼前一亮或是有视觉冲击的东西或者在动画过程中提供更好的引导部分比如红包引导消费者去戳红包他们自然而然就进入到角色当中。历年双十一手淘动画层出不穷去年一些比较典型的动画、场景其实也是给大家展示了一次事件 这些提供给消费者或者用户的动画其实就是一个入口让他们知道手淘正在做某活动。 制作动画的方式很多以前会让视觉设计师或动画设计师去做一个视频、GIF FLASH。相对来说这整个流程比较简短因为当视觉设计师产出了视频GIF或者FLASH之后直接把它放到网页里或者直接拿播放器播放就可以。但它是一个已经定好的内容没法根据不同用户的交互产生一些变化。紧接着HTML5的应用越来越广泛可以用SVG、Canvas以及HTML5做动画这样就会达到引导用户或者说千人千面的效果。 动画有一些基本的组成要素每一个元素有各自的特性比如尺寸、位置、样式、变化比如旋转或是缩放等等。元素是整个动画里最基础的组成部分有了元素以后就把它交给引擎去渲染。因为元素本身是一个描述性结构要让引擎把元素绘制出来。引擎的概念比较广义可以是CSS也可以是Canvas。有了元素以后就需要让动画动起来所以需要一个动效器。动效器用来描述元素的一系列的动作包括元素的动画时长动画是否要循环以及缓动函数。一个动效器可作用一个元素。因为动效器的概念相对底层因此可以基于动效器二次开发开发一些更加接近现实、接近物理学的动画内容。比如说粒子效果因为其随机性近几年应用非常广泛。包括物理学上的自由落体、钟摆、视差等等其实都跟物理学本身有关系。可以借助动效器再借助一定的数学公式把它变成更加复杂的一段动画。 元素和动效器组合起来就叫动画。动画本身有一些特定属性比如动画开始播放、结束播放以及播放的状态等等。有了动画就要有时间时间轴就应运而生。最后需要一个触发器其实触发器的概念主要针对于程序开发。因为需要每一帧都触发一下让时间轴跑起来然后动画真正地开始运作。不管是哪些工具哪些动画它其实解决了几个问题让元素变得简单让描述动效变得简单让管理动画变得简单最终让开发整个动画变得简单。 如何制作动画 现在简单说一下在开发模式当中怎样形成一个动画。以红包火山为例右侧的链路是最普通的开发动画链路。首先在动画里创建一个场景接着把需要用到的元素添加到场景里去再接着给这个元素绑定一个动效也就是创建出来一个动画最终把动画播放出来就能看到红包火山的效果。那么每一步主要做什么呢 首先创建场景场景这个概念在动画里不具体指某一元素或某一具体可以被绘制的内容。当有元素被添加到场景之后才会被渲染。否则就算创建了这个元素它也不会被渲染。这么做是为了在动画的整个渲染过程上节省一点成本。举个例子红包火山动画元素将近三四十个有些动画元素在最开始并不需要但是在写代码时先创建了它然后在需要用的时候把它渲染出来。这时需要有一个管理机制去识别哪一些元素需要在什么时候被渲染这就有一个场景的概念了。 在做红包火山动画的时候把它归为一个场景四个片断。最开始倒计时中间有一段火山升起第三个是火山升起以后的火焰喷发喷发结束或者在喷发的同时有红包喷发。整个红包火山就是这么一个场景。 有了场景以后需要添加元素。首先让元素有一个形状一般来说元素的形状可以简单地归类为矩形、圆形、椭圆形、三角形。因为字体文本特殊一点所以会单独拿出来。另外还有组几个元素合在一起叫做一个组。创建完一个元素以后用元素本身的特性如样式、位置、变换等去描述元素。实际上现在手淘应用到的大多数动画基本上都是一张背景图片。因为设计出来的背景图片本身比较符合手淘的规范。现在很多动画主要借助矩形元素并在矩形元素里贴入图片然后把这些元素组合起来最终变成一个动画。其他用的比较多的还有SVG动画。SVG在近几年流行程度越来越高因为首先它在手机端的兼容性非常好其次它可以做一些其他动画没法做到的效果比如说从圆形变成三角形或者通过比较复杂的路径产生一些意想不到的变化。相对来说SVG的能力更强大。不过目前要完成一个简单的动画不需要SVG这种高级的动画效果。 在来看火山动画里的元素组成。火山主体是一个组由下面四种元素组成一是火山的后景其余是三个火山的前景。把整个火山分成四个单独的元素并且把这四个单独的元素变成了一个组。 在这里穿插一个知识动画世界中的坐标系统。元素的位置就是动画里面的坐标。如上图灰色框是个画布把它认为手机屏幕这时手机屏幕或者画布的中心点是坐标的原点就是00位置。每一个元素也有其坐标叫元素坐标。元素的坐标原点也是元素中心点00。最常用的坐标系是笛卡尔坐标系右手坐标系如上图所示意的右手大拇指指向X轴食指指向Y轴中指指向的位置是Z轴这些都指向X、Y轴的正方向是标准的右手坐标系。 但是前端在写页面时CSS里是左手坐标系。这和动画里经常遇到的坐标系不一样所以需要熟悉不同的坐标系。比如CSS里面X轴位移、Y轴位移一个在动画里X轴和Y轴的位移其实相反。有一个特别容易被忽略的是旋转CSS里的旋转是顺时针动画里定义的旋转是逆时针。所以这两者坐标的差异需要开发时做一个简单的转换从CSS的坐标系转换到动画坐标系。 下一步要给动画创建动效一个元素绑定一个动效以后才真正成为一个动画。动效本身会有一些具体内容比如当创建元素时它的状态其实已经创建好了。这张图片多大或者元素多大还有动效的时长、延伸、晃动或者循环的方式等等都根据W3C的标准定义。最终通过元素以及动效变成一个动画。 那么为什么把火山的整体变成一个组呢其实火山上升时有一个抖动效果且前面三块岩石和火山的上升速度不一样。为达到这种效果在这里做了一个简单的处理让整个火山上升同时又让前景的三块石头上升把这个四个动画组合起来达到了这样的效果。一开始石头不在一起最终把所有石头拼在一起拼成火山。把这四个元素变成一个组让组抖动组里面的元素也会跟着抖动。这样处理的目的是优化性能。如果对很多元素做不同的效果相较于对一个组做一效果性能会变差。 把动效简单地分解一下其实设置比较简单包括样式、时间以及循环等这是动效本身的一些组成部分。 这是单个动效有时候需要把多个动效组合在一起。比如说红包火山一个沿Y轴移动的动效一个沿X轴抖动的动效。把这两个动画组合在一起就变成一个复合动画。如果再加一个Z轴的旋转动画会更复杂。其实每个动效可以单独处理当组合在一起可以做很多不同的事情。 有了动画接下去就简单了就是播放场景里的动画这也是整条做动画链路最简单一个方式。 如何管理动画 通过创建场景、创建元素、创建动画、播放动画完成了一个简短的动画。但是当做一个复杂项目这一种方式远远不够。因为动画有先后顺序有重叠时间这时需要让每一段动画在合适的时间播放所以需要一个智能的控制系统去管理每一个动画。 红包火山升起喷发的动画做了四件事情火山升起用时一秒火山升起以后火焰喷发用了0.4秒火山升起以后同时岩浆往下流也就是说火焰喷发和岩浆流动同时开始但是都在火山升起以后才执行当火焰喷发以后红包才开始喷发岩浆其实一直在流动。这几段动画有一个先后顺序也有重叠关系。 这里先简单说一下CCS在处理这些动画时的短板如火山升起用了1秒紧接着让火焰柱喷发这时火焰柱开始喷发的时间在CSS技术里有一个delay属性比如说延迟1秒钟然后再让火焰柱喷发;相应地岩浆流动也是同样的道理也会延迟1秒钟然后让岩浆流动。火山升起的时间加上火焰柱喷的时间这么长的延迟以后再分发红包这种技术方案虽然解决了问题但是没能提高效率。 所以在动画体系里提出时间轴的概念。创建时间轴并在加入一个动画给该动画两个参数即开始时间和结束时间。当然这两个时间不仅仅可以用绝对时间值还可以是状态码。正常情况下不会关心火山升起用了多久只关心火山升起结束的状态。相应地火山喷发也有一个开始时间和结束时间但后续的动画并不关心这个时间只要知道火焰喷发结束这个状态就可以了再继续下一个动画就可以了。CSS本身没有这样的能力而JS就可以驾轻就熟。 如何扩展动画 很多动画会处理成图片位移加上元素位移的形式。 比如精灵动画也叫雪碧图动画它是很多张图片或一张图片展示不同的位置不断地切换轮播产生的效果是最常用的一种手段。另外一个是路径动画位移最直观的是一条直线从X点到Y点如果移动轨迹是一条很复杂的曲线就要建立路径。路径在动画里非常普遍要通过动效做出来复杂的动画就要用到现实或物理中一些抽象的能力。 精灵动画可以提取出来几个关键词一是精灵图片的地址如上所述这是很多张图片的拼接二是每一帧精灵图片的尺寸三还要知道这张图里一共有多少帧精灵图片四是精灵图片播放的序列因为在很多应用场景里设计师提供了一组精灵图片可能其中的某一个区段或者某几帧图片要重复利用循环播放这时必须要知道在播放整个动画时帧序列是什么最后就是最基本的播放参数比如时长、延时等等。把这些内容抽象出来以后通过插件的形式转换动效代码就达到了最简单的扩展动画的需求。 路径动画其实一样一般很多种方式提供路径。路径其实就是描述了一个不规则的曲线可能是弧线、贝塞尔曲线、离散曲线等只要给定一个路径就可以经过参数配置在每一个时间点计算该路径上的某一点在哪再让该元素运动到路径的那点就可以了。扩展出的路径动画还有一些特定的效果比如物体在移动时是否根据曲线的切线或法线进行旋转等等。 如何改进开发模式 整个项目来看开发动画只是其中的一小部分只动用了前端这一个技术层面但是做整个项目的时候有PD、视觉、运营、市场、前端技术等等。所以真的要完成一个动画开发模式应该怎样做呢 手淘早期开发动画的时候简单粗暴视觉提供设计稿可能是一个视频、GIF或FLASH前端用眼睛识别这个动画用CSS或其他技术还原。视觉会定期检查说动画跑得不对少两个象素等。这样每一个动画开发下来抛开业务层面光开发动画就可能会花掉整个项目周期70%-80%的时间。所以在做一个项目时整个时间的比例非常不协调同时也造成前端的返工比较严重。效率非常低成本却非常非常高。 现在开发动画会借助整个工程体系的能力比如视觉通过某一类编辑器这些动画编辑器需要遵循规范的结构描述语言就是一段结构化数据然后用播放器把结构化描述语言播放出来。这时最简单的动画根本不需要业务开发设计师只要完成动画的设计稿一连串的系列都不需要前端介入。最终的交付其实就是从视觉开发完以后直接用命令变成一个结构化的描述语言最后把它发布到线上的播放器就可以了。假如有一些业务逻辑这时基于结构描述语言把它转换成业务描述语言。二者可以互相转换当通过编辑器导出结构化描述语言以后把它变成业务描述语言在其之上添加一些业务逻辑最后再转换成结构描述语言让播放器播放。最后会发现前端能够通过这样的开发方式可以不参与动画本身制作只关心业务整个动画周期几乎可以并行。
