摇摆动效怎么制作

摇摆动效怎么制作,第1张

在使用手机的时候,我们经常都会看到一些很有趣的loading动画,比如简单的像时钟一样的摇摆动效,虽然不是很复杂,但是意思简单明了,下面我们就一起来学习一下如何制作摇摆动效。

01

进入Adobe effect软件界面,新建一个合成,合成设置帧速率为30f。

02

进入编辑界面,先选择“矩形工具”,然后在合成中绘制一个矩形。

03

我们这里就绘制一个简单的时钟样式,绘制矩形之后再添加一个圆形。

04

需要注意的是,在添加形状的时候一定要保证两个形状都是在同一个形状图层中的,这样方便之后进行调整。

05

接着点选形状图层,用Y锚点工具将中心点移动到上方进行固定。

06

接下来开始设置动效,在开始的位置打上关键帧,将旋转角度数值往左进行设置。

07

最后在终点打上关键帧,将旋转的角度往右进行设置,可以查看一下预览效果。

08

接着添加关键帧辅助,点选全部关键帧,右键点击关键帧,选择“关键帧辅助-缓动”

09

最后按空格键查看预览效果,然后在“图表编辑器”中对速率进行适当调整即可。

5背景音乐&音效


H5页面要炫酷,画面生动还是不够的,一定要配合生动的音乐。因此可以主动跟设计或产品沟通,让他们可以提供音乐资源,分分钟导致UV猛涨有木有!当然,有了音乐,前端也不是直接引用的,还是有点要求:



1音乐不宜过长,30s为佳,而且音乐要加上渐现渐隐效果,方便循环播放;


2音乐体积要小,音质和流量,在手机上还是优先考虑流量吧。


一般背景音乐体积可以接受的范围是200K以下,若太大,可以使用格式工厂等软件,降低它的比特率和声道来改变体积。接着,只需要简单引用。这里有个问题,IOS是不能自动播放音乐的,一定要触发一个用户交互事件,例如点击。


但是有一种hack的方法可以让IOS微信侧页面自动播放(SAFARI依旧无效):通过new一张,监听一张的onload事件,结束后回调执行音频播放audioplay()即可,原理估计是动了dom结构,相当于执行了一次交互。(有人也用过createEvent模拟,原理也是动了dom。)因此,记得暴露一个音乐关闭/打开的按钮,不然肯定被用户骂死。


6有趣的loading


Loading页还是要有的,万一用户网速慢呢以上做了那么多事,如果没有资源加载都是玩不来的,因此还需要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。然而loading还是可以做得很有趣的,一般的做法是:


1引入品牌,例如APP宣传页;


2引入有趣动画,放一个贱贱的人物跳舞给你看;


3一切从简,用CSS3简单动画。


当然,真正要做到高效制作动态H5页面,还是靠积累,因此平时做好的细节动画自己都积累起来,下次分分钟就能用得上。

如果你说的是加载场景时播放流畅动画的话。
可以调用LoadLevelAsync或者LoadLevelAdditiveAsync来异步加载场景。
异步加载其实重要还是应用于游戏LOADING界面,假设A场景到C场景,我们应当让A场景先到读取进度的场景B场景,当异步任务完成后在进入C场景。 A – 》B -》 C ,在B场景中绘制游戏进度条或读取动画。因为B场景仅仅是个显示LOADING动画的场景,所以读取该场景是瞬间就完成的。

有个很简单的方法
首先载入jquery

<script src="
之后把body加上style
<body style="display: none;">
然后添加script事件
<script>
$(document)ready(function(){
    $('body')show(10000); // 1000等于1秒
});
</script>

//创建进度条;
var stg = new Sprite();
stggraphicslineStyle(1,0x00FFFF,02);
stggraphicsbeginGradientFill(GradientTypeLINEAR,[0xFFFF00],[100,100],[0,255]);
stggraphicsdrawRect(0,0,200,5);
stggraphicsendFill();
stgx = (stagestageWidth - stgwidth)/2
stgy = (stagestageHeight - stgheight)/2
thisaddChild(stg)
//添加加载侦听
thisloaderInfoaddEventListener(ProgressEventPROGRESS,loading);
thisloaderInfoaddEventListener(EventCOMPLETE,loaded);
function loading(eve):void
{
var loadpre:int = evebytesLoaded/evebytesTotal100
stgscaleX = loadpre/100
var txt:TextField = new TextField();
txttext = loadpre + "%"
stgx = (stagestageWidth - stgwidth)/2
stgy = (stagestageHeight - stgheight)/2
thisaddChild(txt)
}
function loaded(e:Event):void
{
play();
}
这就是AS3的Loading代码,希望对楼主有帮助哦
//stgx = (stagestageWidth - stgwidth)/2
//stgy = (stagestageHeight - stgheight)/2
把这两句后面的改成一个具体的数字就可以了
比如:
stgx = 400
stgy = 500
这样就固定了一端,只会一端延长了
另外楼主对'int'型的认识有点误差,int和Number型是差不多了,是一个数字,int只是限于整数,而Number是可以包括小数的。
上面的代码中 stg继承的是graphics类型,graphics是创建图形用的,scaleX可以控制grahics创建出来的适量图形进行缩放,所以咯,你将scaleX基于int控制当然是有问题啦


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13331518.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-16
下一篇 2023-07-16

发表评论

登录后才能评论

评论列表(0条)

保存