当前位置：首页 > 网页特效 > 动画效果

可以在浏览器控制台中执行源码字符动画的js插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

dom-animator.js动画可以非常简单，也可以非常复杂。取决于你想制作什么动画效果。首先你需要创建一个新的domAnimator对象实例（前提是你已经引入了dom-animator.js文件），然后可以通过addFrame()方法来创建字符动画。下面是一个非常简单的动画-眨眼动画效果。

```html
<script>
    var domAnimator = new DomAnimator();
    domAnimator.addFrame('o_o');
    domAnimator.addFrame('-_o');
    domAnimator.animate();
</script>     
```           
上面的眨眼的字符动画效果会显示在同一行中。如果你想字符显示为多行，可以在addFrame方法中传入一系列的字符串，通过逗号隔开。

```html
<script>
    var domAnimator = new DomAnimator();
    domAnimator.addFrame(['0_0', ' | ', ' | ']);
    domAnimator.addFrame(['0_-', ' | ', ' | ']);
    domAnimator.animate();
</script>     
```             
你也可以为所有的动画帧设置一个速度。默认的动画速度是500毫秒（这个速度是ASCII字符动画速度，而不是60fps）。

```html
<script>
    var domAnimator = new DomAnimator();
    domAnimator.addFrame('o_o');
    domAnimator.addFrame('-_o');
    domAnimator.animate(1000); //ms
</script>   
```               
如果你想停止动画，可以调用stop方法。

```html
<script>
    // Setup
    var domAnimator = new DomAnimator();
    domAnimator.addFrame('o_o');
    domAnimator.addFrame('-_o');
    domAnimator.animate();
 
    // After 10 seconds.
    setTimeout(function() {
        domAnimator.stop(); // Stop the animation
    }, 10000);
</script>   
```               
#####  浏览器支持 
这个控制台源码字符动画插件已经在最新版本的Safari、Chrome 和 Firefox浏览器中进行了测试。在Chrome中动画效果最好，因为Chrome浏览器在控制台中支持新行。

web299.com

可以在浏览器控制台中执行源码字符动画的js插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果