Anipa
JS Animation Library with timeline
How to use in Browser
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@easylogic/anipa@0.0.6/dist/main.js"></script>
<script type="text/javascript">
var Player = anipa.Player;
</script>
How to use in es6
npm install --save @easylogic/anipa
import { Player } from '@easylogic/anipa'
JS Animation
var player = new anipa.Player([
{selector: '.sample', properties: [
{
property: 'width',
keyframes: [
[500, '0%'],
[3000, '100px'],
[5000, '10px']
]
},
{
property: 'height',
keyframes: [
[1000],
[2000, '100px']
]
}//,
// {
// property: 'background-image',
// keyframes: [
// [0, 'background-image: linear-gradient(0deg, white 10%, blue 50%, yellow 100%)'],
// [2500, 'background-image: linear-gradient(3600deg, white 10%, blue 20%, red 100%)'],
// [5000, 'background-image: linear-gradient(1200deg, white 10%, red 20%, blue 100%)']
// ]
// }
]}
], {
duration: 5000,
iterationCount: 0,
direction: 'alternate'
})
player.play();
Animatable Type
| Type | Value |
|---|
| {color} | rgba(0, 0, 0, 1) yellow |
| {length} | 10px 10% 10em |
| {number} | 10 0.3434 |
| {boolean} | "alternate" "normal" |
| {rotate} | 10deg 0.5turn |
| {border-radius} | 10px 10px 10px 10px 10px |
| {border} | border:1px solid black;border-top:10px solid yellow; .... |
| {filter} | blur({length}) hue-rotate({rotate}) ... |
| {clip-path} | none circle() ellipse() inset() polygon() , ... |
| {transform} | translateX({length}) translateY({length}) rotate({$rotate}) ... |
| {path} | "M 20 30 L 20 50 Z" |
| {polygon} | "30,20 50,80 90,200" |
| {text} | "Insert a text" |
Animatable Properties
Single Value Type
| Property | Value Type |
|---|
| background-color | {color} |
| color | {color} |
| text-fill-color | {color} |
| text-stroke-color | {color} |
| fill | {color} |
| stroke | {color} |
| border-color | {color} |
| border-top-color | {color} |
| border-left-color | {color} |
| border-right-color | {color} |
| border-bottom-color | {color} |
| Property | Value Type |
|---|
| left | {length} |
| top | {length} |
| width | {length} |
| height | {length} |
| perspective | {length} |
| font-size | {length} |
| font-stretch | {length} |
| font-weight | {length} |
| text-stroke-width | {length} |
| border-width | {length} |
| border-top-width | {length} |
| border-left-width | {length} |
| border-right-width | {length} |
| border-bottom-width | {length} |
| Property | Value Type |
|---|
| fill-opacity | {number} |
| opacity | {number} |
| stroke-dashoffset | {number} |
| Property | Value Type |
|---|
| mix-blend-mode | {boolean} |
| fill-rule | {boolean} |
| stroke-linecap | {boolean} |
| stroke-linejoin | {boolean} |
| border-style | {boolean} |
| border-top-style | {boolean} |
| border-left-style | {boolean} |
| border-right-style | {boolean} |
| border-bottom-style | {boolean} |
| Property | Value Type |
|---|
| rotate | {rotate} |
| Property | Value Type |
|---|
| text | {text} |
Multi Value Type
| Property | Value Type |
|---|
| background-image | background-image: {image}; background-position: {length} {length}; background-size: {length} {length}; background-repeat: {boolean}; background-blend-mode: {boolean} |
| offset-path | {pathLayerId},{distance:length},{rotateStatus:boolean},{rotate:rotate} |
| box-shadow | {offsetX:length} {offsetY:length} {blurRadius:length} {spreadRadius:length} color:color} , ... |
| text-shadow | {offsetX:length} {offsetY:length} {blurRadius:length} {color:color} , ... |
| border-radius | {border-radius} |
| border | {border} |
| filter | {filter} |
| backdrop-filter | {filter} |
| clip-path | {clip-path} |
| transform | {transform} |
| transform-origin | {length} {length} |
| perspective-origin | {length} {length} |
| stroke-dasharray | {number} {number} |
| d | {path} |
| points | {polygon} |
Development
git clone https://github.com/easylogic/anipa
cd anipa
npm install
npm run dev
Build
npm run build
License : MIT