animate插件(animation插件)

Flash软件的升级版软件Animate都有什么功能？

Animate自从2015年推出后，就取代了Flash制作软件在平台上的发布，作为Flash软件的升级版本，Animate的功能更多，可发布和制作的平台类型也更多。

这里就讲一下目前的Animate软件能制作哪些内容：

1.二维动画，这个是Flash软件最早推出就很有优势的功能，在Animate软件中更是增加了高级图层，摄像机功能，而且有口型比对等高级功能，让二维动画制作更方便。另外，加入了资源库的概念，更便于对日常工作需要中素材的管理和使用。

2.互动课件，一般是用在教学中的，可以让枯燥的教学更生动，因为能方便地使用视频，音频或图片等不同类型的素材，也可以开发互动游戏。

3.开发软件，在Animate中，通过AS3脚本，可以开发在电脑平台，安卓平台以及苹果IOS平台下的应用软件。这个从Flash软件中就可以的功能，同样保留下来了。

4.Html5页面，这个开发功能是在Animate中新增加的，因为以前浏览器都默认支持FlashPlayer插件，现在已经有一些浏览器停用了，而且国外直接全部停用。

所以，到了Animate中，可以直接开发Html5页面，使用Canvas文档和功能，当然，同样要掌握JS代码才可以开发互动内容。

最后，虽然Flash制作软件改名为Animate中，以前的优势功能都保留下来了，把AS2等低版本的脚本功能去除，增加了对Html5的支持，在Adobe官网也对Animate软件有了更多的推广，相信Animate软件会替代Flash软件的开发领域，创造更多的优秀作品。

animate.css插件为什么只能动一次

就好像一百米赛跑一样，开始时运动员是在起点处，比赛开始后他就会逐渐跑到终点，这就是animate的过程。但是，如果一开始运动员就站在终点处，那就不用比赛啦，因为开始的同时就意味着结束啊，所以animate就会一闪而过了。

adobe animate cc现在还能用吗

当然可以用了，这个软件是flash软件的升级版本，一直讨论和争议的，被停用的是flash player插件，浏览器用的，并不是制作软件。

animate air sdk 设置

要创建一个自定义平台支持插件，开发人员需要使用自定义平台支持开发工具包。

在“下载”选项卡中选择“自定义平台 SDK”

选择 2020 SDK 版本

选择“跨平台”，然后

选择“Animate 20.0（最新）”选项进行下载。

单击此处下载样例插件并将其用作构建自定义支持平台支持插件的参考。

在“下载”选项卡中选择“自定义平台 SDK”。

选择 2020 SDK 版本

选择“样例插件”

插件由以下几个元素构成：

DocType：它将在 Animate 中为自定义平台添加一个新的文档类型并控制创作功能。

Publisher（发布程序）：它允许配置发布设置并将文档发布到自定义平台。

有关自定义平台支持功能的概略介绍，请参阅自定义平台支持。

h5嵌入app 以及页面全屏滚动动画

script type="text/javascript"

!function(e,t){var i=e.documentElement,n="orientationchange"in window?"orientationchange":"resize",a=navigator.userAgent.match(/iphone|ipad|ipod/i),d=function(){var e=i.clientWidth,t=i.clientHeight;e(750=e(e=750),i.style.fontSize=e/750*100+"px",i.dataset.percent=e/750*100,i.dataset.width=e,i.dataset.height=t)};d(),ae.documentElement.classList.add("iosx"+t.devicePixelRatio),e.addEventListenert.addEventListener(n,d,!1)}(document,window)

/script

（设计稿尺寸为750）

---? getToken()为定义的方法名称：

安卓 ：window.native.方法名()

eg：

? TOKEN = window.native ? window.native.getToken() : '';

? appVersion = window.native ? window.native.getAppVersionName() : '';

? uuid = window.native ? window.native.getUUId() : '';

? phoneModel = window.native ? window.native.getPhoneModel() : '';

? clientId = window.native ? window.native.getClientId() : '';

ios ：window.webkit.messageHandlers.方法名.postMessage(null);

eg： 如果没有参数 要写上null

? ? window.webkit.messageHandlers.getToken.postMessage(null);

? ? window.webkit.messageHandlers.getClientId.postMessage(null);

? ? window.webkit.messageHandlers.getPhoneModel.postMessage(null);

? ? window.webkit.messageHandlers.getUUId.postMessage(null);

? ? window.webkit.messageHandlers.getAppVersionName.postMessage(null);

--- 引用vconsole.js

script src=""/script

? script type="text/javascript"

? ? ?var vConsole = new VConsole();

? /script

（app上可查看log network 相关信息展示）

4.1 --- alert?localStorage相关属性失效

查找原因：console.log(window) 打印查看APP里没有相关属性?

解决办法：

寻找app相关人员 加上相关属性。

或者如果有时间原因可以尝试（不一定都适用）：

alert换成原生自己写的弹框展示?

localStorage换成全局变量

4.2 ---? 使用fullpage.js插件 app里页面空白 浏览器查看页面正常

原因：fullpage.js全屏插件设置html body 高度100%? 而APP里面设置高度为依据h5页面高度 导致h5嵌套进去 高度为0 页面自然空白?

解决办法：?

1:app修改设置 参考回答： ?

2：h5 初始化插件之后 再设置html body高度为100%， body等元素背景图片?

eg：

$('#fullPage').fullpage({});?

$('html').css('height',window.innerHeight)

$('html').css('width',window.innerWidth)

$('html').css({'background':'url() no-repeat center','background-size':'cover'})

$('body').css('height',window.innerHeight)

$('body').css('width',window.innerWidth)

--- 页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引浏览者的注意，使页面更吸人眼球。

--- WOW.js 依赖animate.css，所以它支持 animate.css 多种的动画效果，能满足各种需求。

--- IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

使用方法：

1、引入文件

link rel="stylesheet" href="css/animate.min.css"

2、HTML

div class="wow slideInLeft"/div

div class="wow slideInRight"/div

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：

div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"/div

div class="wow slideInRight" data-wow-offset="10"? data-wow-iteration="10"/div

3、JavaScript

new WOW().init();

如果需要自定义配置，可如下使用：

var wow = new WOW({

?? ?boxClass: 'wow', //‘wow’需要执行动画的元素的 class

?? ?animateClass: 'animated', //‘animated’animation.css 动画的 class

?? ?offset: 0, //0距离可视区域多少开始执行动画

?? ?mobile: true, //true是否在移动设备上执行动画

?? ?live: true //true异步加载的内容是否有效

});

wow.init();

一个 demo 尝试：

是要引入animate.css和wow.js的

html ：

ul class="list2"

li class="wow fadeInLeft animated"/li

li class="wow fadeInRight animated" data-wow-delay="0.3s"/li

li class="wow fadeInLeft animated" data-wow-delay="0.6s"/li

li class="wow fadeInRight animated" data-wow-delay="0.9s"/li

/ul

ul class="ft-service"

li class="wow fadeInUpBig animated"/li

li class="wow fadeInUpBig animated" data-wow-delay="0.3s"/li

li class="wow fadeInUpBig animated" data-wow-delay="0.6s"/li

li class="wow fadeInUpBig animated" data-wow-delay="0.9s"/li

li class="wow fadeInUpBig animated" data-wow-delay="1.2s"/li

/ul

css ：

ul{

width: 1200px;

overflow: hidden;

}

.list2{

width: 760px;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.list2 .wow{

display: inline-block;

? ? width: 50%;

? ? height: 560px;

background-image: url();

}

.ft-service .wow {

? ? display: inline-block;

? ? width: 236px;

? ? height: 125px;

? ? background-image: url();

? ? background-repeat: no-repeat;

}

js ：

script type="text/javascript"

var wow = new WOW({

? ? boxClass: 'wow',

? ? animateClass: 'animated',?

? ? offset: 0,

? ? mobile: true,

? ? live: true

});

wow.init();

/script

这样就有了一个可以自己发挥的动画效果了。

就是一个比较方便的进入 或者 滚动 的时候的页面的加载动画了，可以随意加入自己想要的动画。

animate.css也可以与别的插件结合使用 比如 fullpage.js都是可以有这种页面进入 滚动时候加入动画的效果。

fullpage.js 与 animate.css 实现的动画效果：

demo ：

也是要引入相关文件 fullpage.js? fullpage.css? animate.css

HTML ：

div id="fullPage"

? div class="section"

? ? h3 id="p1" class="display"第一屏/h3

? /div

? div class="section"

? h3 id="p2" class="display" onclick="getNext()"向上滑动/h3

? /div

? div class="section"

? ? h3 id="p3" class="display"第三屏/h3

? /div

? div class="section"

? ? h3 id="p4" class="display"第四屏/h3

? ? p id="p5" class="display"这是最后一屏/p

? ? p id="p6" class="display" onclick="getTop()"返回首屏/p

? /div

/div

css ：

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

.section p{font: 30px "Microsoft Yahei";}

.display{display: none;}

.display1{display: block;}

JS :

script

$(function(){

$('#fullPage').fullpage({

sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],

//滚动到某一屏后

afterLoad: function(anchorLink, index){

if(index == 1){?

? ? ? ? $('#p1').addClass('animate__animated animate__bounceInLeft display1');

}

if(index == 2){?

? ? ? ? $('#p2').addClass('animate__animated animate__bounceInLeft display1');

}

if(index == 3){?

? ? ? ? $('#p3').addClass('animate__animated animate__bounceInLeft display1');

}

if(index == 4){?

? ? ? ? $('#p4').addClass('animate__animated animate__bounceInLeft display1');

? ? ? ? $('#p5').addClass('animate__animated animate__bounceInLeft animate__delay-1s display1');

? ? ? ? $('#p6').addClass('animate__animated animate__bounceInLeft animate__delay-2s display1');

}

},

onLeave: function(index, direction){

? ? ? if(index == '1'){?

? ? ? ? $('#p1').removeClass('animate__animated animate__bounceInLeft display1');

}

if(index == '2'){?

? ? ? ? $('#p2').removeClass('animate__animated animate__bounceInLeft display1');

}

if(index == '3'){?

? ? ? ? $('#p3').removeClass('animate__animated animate__bounceInLeft display1');

}

if(index == '4'){?

? ? ? ? $('#p4').removeClass('animate__animated animate__bounceInLeft display1');

? ? ? ? $('#p5').removeClass('animate__animated animate__bounceInLeft animate__delay-1s display1');

? ? ? ? $('#p6').removeClass('animate__animated animate__bounceInLeft animate__delay-2s display1');

}

}

});

});

//跳转到某一屏

function getNext(){

$.fn.fullpage.moveTo(3);

}

//没有动画的跳转到首屏

function getTop(){

$.fn.fullpage.silentMoveTo(1);

}

/script

这样的话 也有和wow.js类似的效果

都是页面进入 和 滚动时候 给元素加入动画效果。

Animate做的动画如何插入到网页里？

有两种方式，一种是生成swf，但是需要页面有flash player插件，目前只有个别浏览器支持，不建议，第二种就是导出视频，或者gif，gif图适合时长短的动画。