Framer之动画 | 让播放器的摆针动起来

正文转自:http://blog.csdn.net/zapzqc/article/details/42237935

事先的Framer教程都是遵守个人喜好去写的,没有如约难易程度形成密密麻麻。为了让我们能更好地入门,我准备由易到难写一个名目繁多教程,尽量保持在每周日篇的效用。

出于Ionic更新了命令行工具,未来修改应用图标和丰裕启动画面就概括了,最新方法见最下方:

导读:动画一般和图层一起用,它可以让图层动起来。我们可以透过一文山会海属性,诸如执行动画的图层、需求转移的可视属性、动画时间、动画延迟时间等,来定义一个卡通。动画也提供了有的函数可以让您说了算它的初叶、甘休和反向。

 

此处先介绍一下卡通。在Framer中,动画是对峙于图层来说的,也就是说大家可以给某个图层定义一个不一的体裁,让该图层从最伊始的默许样式到那个样式之间时有暴发一段平稳的连片变换就形成了动画片。比如说一个图层的宽度由200像素逐渐变成400像素,就是一段动画。我们无需关心这当中是如何变化的,只需求定义初叶和终结状态的样式,就可以让它和谐发生一段动画。

利用图标:

animation

 

和图层一样,动画也是一个对象,然而并未图层那么直观,它多少抽象。你可以精通为,这么些动画对象存储了一多重动画设置的数据。它存储的属性值有做变通的图层、做变更的特性、运动曲线、运动时间、延迟时间、重复次数、颜色格局等。

1.在所有项目所在文件夹下创立res文件夹,里边再各自创造八个公文夹android和ios。

property

起名 1

看大家通过这几个实例来看卡通对象怎么用呢。在上四回的基本功上,大家继承编写代码让这些摆针动起来。

起名 2

上次这一个图层对应的代码很长,大家随后前面写会更为长,会把温馨看晕的。可是没什么,Framer提供了代码折叠功效,可以选中一部分代码使其折叠,要求时再拓展。

 

code fold

2.对准Android平台:将我们的要替换的启航图标放如android文件夹下。可以分别起名为:mdpi.png(48*48),hdpi(72*72)、xhdpi(96*96)、xxhdpi(144*144) 
和 xxxhdpiI(192*192)。

将代码折叠后,在背后添加如下代码。可以看来,和创办图层一样,我们也应用了重大词new来创建一个Animation对象,我给她起名为:swingingAnimation。前面分别设置它的运动时间是2s,延迟1s实施,必要执行动画的图层是swing,须求转移的属性是它的旋转角度。最后通过动画对象自带的“起首动画”方法start()来举办动画。

 
针对ios的,待补充。

animation start

 

因为延迟1秒,所以等待1秒未来大家就可以看见功效啊。

3.在config.xml中添加

initial

 <platform name="android">
              <icon src="res/android/ldpi.png" density="ldpi" />
              <icon src="res/android/mdpi.png" density="mdpi" />
              <icon src="res/android/hdpi.png" density="hdpi" />
              <icon src="res/android/xhdpi.png" density="xhdpi" />
 </platform>

 

等等,好像有些语无伦次,它不是从右上角转轴处开首转的,而是从正要旨开端转动。大家需求把他的变换中央放置在右上角转轴处,那样就可以让它绕着转轴旋转啦。所谓变换主题,你应当在Ps或者Sketch中接触过,如下图。

起名 3

origin

其中src中的图片路径就为整个项目的相对路径。

我这里偷了个懒,只搞了一个最高像素密度的应用图标(192px*192px)进去,安卓会自动进行压缩。 

这里顺便说一下如果要修改应用的名称,只要修改name标签里的内容即可。

由此在那里大家应当给图层swing添加多少个特性originX和originY,他们的取值范围都是0到1。假设originX等于0,就表示其更换中央在右边缘,即使originX等于1,就象征其转移中央在左边缘,originY则是相对于上上边缘。

起名 4起名 5

双击被折叠的代码进入编辑,给它伸张变换中央属性。

这样在命令行中重新运行ionic run android,就能看到应用图标和名字已经被替换了。

启动画面:

    将启动画面的图片拷贝到之前的android文件夹下,splash-land-hdpi.png(640*480)splash-land-ldpi.png(426 × 320)splash-land-mdpi.png(470 × 320)splash-land-xhdpi.png(960 × 720)splash-port-hdpi.png(480*640)splash-port-ldpi.png(320*426)splash-port-mdpi.png(320*470)splash-port-xhdpi.png(720*960)

(名称可随意,只要和config.xml对应上即可)。

    在config.xml中添加

    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>

    <preference name="SplashScreen" value="screen"/>

    <preference name="SplashScreenDelay" value="10000" />

其中10000单位为毫秒,即10秒后隐藏启动画面。如果不写第三句,默认3秒隐藏。

   如下图所示:

change origin

起名 6

在Framer中,变换中央也能够像在Ps中调剂的,不过没有那么好用。进入swing的设计形式,按住Command键,图层上会出现一个半透明青色的圆点,它就是更换主题。拖动它就足以转移它的职位,可是本人操作时由于该图层太小而且它总是会被边缘的控制点(周围三个白点)吸过去,所以最后我照旧从来调节数字逐年试出来的。

 

我这里没有那么多分辨率下的图片,就随便找了一个稍大分辨率的,density也没写。它会自动将该图片拷贝到drawable文件夹。

这时候再重新运行程序,即可看到启动画面。

用以上的方法,启动画面的显示时长是固定的,很明显不太友好。

未完持续...

visual justify

以上措施已经可以使用Ionic命令行工具来自动生成了,步骤如下:

说到底调好的成效就是那般:

1.在项目标根目录下开创resources文件夹。

final demo

2.在文书夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)

动画还提供了一个情势reverse(),可以将动画片反向。若是将刚刚做的卡通片反向,那么摆针摆到左侧后会再摆回到初阶地方。需求注意的是,该办法不是将动画“反向并执行”,而只是“反向”,所以只要急需举行须要再行调用start()方法。

3.在cmd中进入项目所在文书夹执行:

reverse

[html] view
plain

copy
print?起名 7起名 8

在最后加上那段代码,就可以看见摆针摆到左边之后,又向右摆回到初叶地点。

  1. ionic resources  

    ionic resources

起名,ok

 执行该命令后,会自动在resources文件夹下创制已添加的平台名称的文书夹,如:android,其中会自行将图片进行缩放、裁剪,生成不相同分辨率的图纸,并在config.xml中添加相应内容。

小结一下这一节所讲的情节:

也可分别执行:

1、动画也是一个目标,不过这些目的相比较空虚。
2、动画需求和图层结合使用,因为它是对图层的可视属性进行操作。
3、动画提供了start()、stop()和reverse()多少个艺术来控制动画起头实施、甘休和反向。
4、反向方法reverse()相当于新建了一个转头的卡通对象,它不含有动画开头指令。

[html] view
plain

copy
print?起名 9起名 10

点击这里获取源代码和图片素材,试着祥和做一下,下回大家继续行使那个播放器讲解Framer的境况。

  1. ionic resources –icon       
  2. ionic resources –splash  

    ionic resources –icon
    ionic resources –splash

留神:执行以上命令时需在线!

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图