anijs 一个小巧的动画库

YuboonaZhang 发布于2019-08-19 17:07 / 2677人阅读

摘要：很多时候我意识到前端已近变成写宣传页面我不知道是可悲还是生活的必然小问题使用和制作动画是目前比较流行的做法但是最后很多人的代码就变成这样估计这些都是生成的那么我有个疑问还要干什么这些工具生成的代码最后怎么手动开发

很多时候我意识到前端已近变成写h5宣传页面我不知道是可悲还是生活的必然

小问题

使用css animation和js animation api制作动画是目前比较流行的做法

但是最后很多人的代码就变成这样

估计这些都是js生成的那么我有个疑问还要css 干什么
这些工具生成的代码最后怎么手动开发

我的小想法

申明式编程

无论是手动还是工具生成的代码都使用同一套库

于是我找到了一个库 anijs 该库压缩后大小为10kb左右

anijs 是一个js动画框架实现了类似于我的想法

github地址

If you click me,

一个开发人员只要知道什么时候做什么 ok 无论编辑器还是手写都是一个语法核心库还可以分拆维护

anijs 语法

data-anijs  -> Sentence 1; ... ; Sentence n
Sentence    -> Definition, ... , Definition n
Definition  -> if | on | do | to | before | after | helper

有些小例子

比如说我想做个listbox 一个一个接着移动进入场景

这时候我们可以使用animate.css anicollection.css 或者自己写个animation

your style css

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
        
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
        }
    }
    
    .fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
    }

html

简简单单不用写什么代码

如果有用一些框架

完全可以封装成如下

如果你想看代码
github地址

GPU云服务器云服务器 anijs java 动画库小巧linux面板小巧好用的linux

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

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

可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0
[译]2018年值得关注的10大JavaScript动画库

摘要：幸运的是，供应似乎与需求相匹配，并且有多种选择。让我们来看看年值得关注的十大动画库。八年了，仍然是一个强大的动画工具。接下来在这个令人惊叹的动画库列表上的就是了。，通常被称为动画平台，我们忽略它在列表中的排名，它是列表中最受欢迎的库之一。原文链接原译文链接现代网站的客户端依靠高质量的动画，这就使得JavaScript动画库的需求不断增加。幸运的是，供应似乎与需求相匹配，并且有多种选...

Me_Kun 2019-08-23 10:33 评论0 收藏0
11 个最好的 JavaScript 动态效果库

摘要：经过一番研究，我收集了个最好的库，你可以用在自己的项目中。该库于年月首次推出，目前仍有近名参与者开发。超过的，是一个动画库，可以处理属性单个转换或任何属性，以及对象。对智能设备的方向作出反应的视差引擎快速创建漂亮的动画。翻译：疯狂的技术宅原文：https://blog.bitsrc.io/11-jav... 当我想要在网上找一个简洁的 Javascript 动效库时，总是发现很多推...

wawor4827 2019-08-23 16:06 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

neuSnail 2019-08-20 14:16 评论0 收藏0