anijs 一個小巧的動畫庫

YuboonaZhang 發布于2019-08-19 17:07 / 2673人閱讀

摘要：很多時候我意識到前端已近變成寫宣傳頁面我不知道是可悲還是生活的必然小問題使用和制作動畫是目前比較流行的做法但是最后很多人的代碼就變成這樣估計這些都是生成的那么我有個疑問還要干什么這些工具生成的代碼最后怎么手動開發

很多時候我意識到前端已近變成寫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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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