前沿导读

       近几年来，动效设计已经成为设计师越来越重要的课题。可是，在你的实际工作中，是否发现，你的动效软件用的6到飞起～动效设计创意十足，很酷很炫。当你翻看Drrrible大神的作品时候，你可以一个循环动画效果看一个上午。但是，冷静下来思考的时候，你是否注意到。。。它在前端技术上是否能够实现呢，如何让它接近百分百的实现呢？当你把设计动效稿给到前端小哥的时候，他能否明白你的想法，关注到你的设计细节，甚至是理解你的追求呢？

        靠别人永远不如靠自己，假如你明白了前端动画的基础知识，分分钟钟让你的设计稿变为现实，这样你就能够升职，加薪，当上设计主管，出任CEO,走上人生”巅疯”啦…

动画函数

       学什么都是先从整体构架开始，但因为考虑篇幅和理解能力的因素，所以先从前端的最基础动画说起。其实代码并没有你想的那么难，基础的其实就和学软件操作一样简单，我们一步步开始吧...

移动变换

旋转变换

缩放变换

拉伸变换

矩阵变换

其他细节

文章寄语

看过这篇介绍后，应该对前端的基本动画大致有了个初步了解。在你设计动画之初，你就能大致了解前端技术能够达到哪些效果（这些基本动画效果是可以互相叠加的），以及对接下来更加复杂的动画打下良好的基础。

       文章如果转载请署名作者名称

       不明白的地方也可以文章留言或私信我，有空我会及时回复你，

       其中可能会有不对的地方，欢迎大家留言纠正，与大家一起成长。

       关注我的微信公众号「 陈踢缺er」