force00 2018-10-02
Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言,同时也是一套 React 框架动效解决方案,提供了单项,组合动画,以及整套解决方案,帮助开发者更容易的在项目中使用动效。
Ant Motion v1.6.2 更新如下:
以自然、高效、克制三大原则为主体。
以时间与缓动来详细讲解速度的理念。
将现实空制与动效的结合。
基本的元素组合与多个元素组合的动效。
页面里视图发生变化时所需要的动效。
下载地址:
Principle for Mac是一款新开发的交互设计软件。相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些。如果您还没有合适的或者喜欢的交互原型设计软件,可以考虑一下这一款Pri
借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现。<input class="input-fill" placeholder="邮
花里胡哨的canvas实现太过于繁琐,这就是本文存在的意义.首先画一个简单的盒子:利用::before与::after画两个圆角值不同的不规则圆形:父元素设置overflow: hidden最后加上animation动画让两个不规则圆形旋转起来即可。效果图
编者按:Google 设计团队为了更好地推进 UI 和动效设计,自己开发过不少新的工具,打通 Sketch2AE 是其中之一,如今的 AEUX 也是为了相似的目的而存在的一个全新升级的动效工具~为 AE 准备视觉素材通常意味着要用 AI 来先制作相应的素材
前言这一段时间,Flutter的势头是越来越猛了,作为一个Android程序猿,我自然也是想要赶紧尝试一把。在学习到动画的这部分后,为了加深对Flutter动画实现的理解,我决定把之前写的一个卡片切换效果的开源小项目,用Flutter“翻译”一遍。思路首先
经调研发现,Lottie是个简单、高效且性能高的动画方案。Lottie是可应用于Android, iOS, Web和Windows的库,通过Bodymovin解析AE动画,并导出可在移动端和web端渲染动画的json文件。换言之,设计师用AE把动画效果做出
canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分别采用普通动效与粒子特效实现了一个简单的时钟。普通时钟普通动效即利用
扁平化的兴起,现在越来越流行动效设计,特别对于移动端,对交互动效要求是很高的,今天为大家整理一些以展示动效为主的网站,对交互设计师来说是很好的灵感发源地。UI MovementUI movement此站更新比较快,主要展示移动APP的动效界面为主。Moti
前言在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时,我们必须转向CSS Animation了。本文为这段时间
前言本文主要是前端图形处理相关,主题围绕canvas进行展开。包括canvas动效、html2Canvas截图、gif.js合成动图。研究这些东西,有工作需要也有兴趣使然,研究的不深、不过还是有点成果的,欢迎有兴趣的小伙伴一起交流探讨。canvas动效Ca
前言面对众多卡片层叠效果,我们的产品童鞋也突发奇想,搞出了另一种卡片层叠切换展示的交互,而且产品狗们居然要求多做几种动效给他们看,好让他们选择,这简直就是要搞事情啊,what are you 弄啥咧?!在这里,我们通过方块的缩放大小差异以及在Y方向上的位置
TimeLineLite是ASC支持动画效果的脚本帮助类,它可以实现动画缓动效果。如果您要在工作中使用到缓动效果,这无疑为我们敞开了一道学习的大门。官方网站为我们提供了第一手资料,我们也可以查看相关的中文翻译。但是本人强烈推荐只看英文版的,如果看不懂的话再
前面有专门写过一篇morphing动画基础知识的文章,不了解的话可以去这里看看。今天这篇文章来讲一个morphing动画在UI界面上一个具体的运用即具有morphing动画效果的播放按钮。当然像这么简单的效果使用CSS也可以实现。但是如果有大量的类似的mo
最近Github有一个上很火的开源动画集叫Animations。我也很喜欢做动画动效,特来学习观摩。因为动效的特殊性,很多情况下这个项目里的动效不能直接Copy到我们现有的项目中直接使用,所以搞清楚她们的实现原理就很有必要了。建议配合源码学习。思路 整体效
如今对UI设计感兴趣的小伙伴不在少数,所以参加UI培训的人越来越多,那么在众多喜欢UI设计或者是正在学习UI设计的小伙伴里,有多少对UI动效设计的原则有所了解呢?好的动效果设计,可以让用户清晰的感受到内容之间的脉络关系,了解到各个元素的物理状态,与此同时还
HTML5确实非常强大,小编之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以做到。2D炫酷动效是需要技术积累的,这里有4个重点大家可以着重掌握一下:。css3选择器是基于cs
在APP和网页制作中加入UI 交互动效制作,已经是提高用户体验度的有效方式。这些技巧能使页面流畅,并且能够运行在流行的台式和移动设备的浏览器上,最重要的一点,它们还非常易于维护。CSS 中的 pointer-events 属性只是让元素失去了点击和交互的响
前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的Loading,问我能不能实现,看了下效果确实不错,也还比较有新意,复杂度也不是非常高,所以就花时间给做了,我们先一起看下原gif图效果:
我们这里将讨论的是Javascript缓动效果的实现,这个看似没有实际作用的功能,其实实现更多花样繁多Javascript缓动效果的基石。缓动,学名为Tween,缓冲移动的简称。既然是缓动,它就一定涉及以下概念:距离,时间与速度。所需的时间通常都是未知,但
最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大,请求也越来越多,能
用户体验设计的发展日趋完善,优秀的动效是完善用户体验中不可或缺的一环,优秀的界面动态设计可以让产品的用户体验锦上添花……你会说,这些道理我都懂,但是动效做起来真的很麻烦啊。直接切入到大家常见的问题吧:。一般情况下,在沟通界面动效的过程中,工程师会希望设计师
动画效果是用户体验设计中绕不开的环节,而在移动端交互当中,动效是作为转场的润滑剂,承上启下的重要环节而存在。无论是发送信息,打开设置,选中元素,导航到下一个页面,这些变化发生的时候,动效让这一切不那么突兀,自然地过渡,呈现状态变化,帮助用户更清晰的明白当前