专栏首页向治洪墨迹天气3.0引导动画

墨迹天气3.0引导动画

 实现墨迹天气向上滑动的viewpager使用的开源库ViewPager-Android。ViewPager-Android开源库设置app:orientation定义滑动方向。

    墨迹天气引导界面共有4个视图,先看一下:(这里引入的图片都是实现后的,截图都是静态图,运行程序看动画效果)。

图一动画效果:    

    图一中有四个动画效果,最上面的“极低耗电”标示,最下面的箭头标示,还有中间旋转的电池图标和电子表的闪动,最上面的使用的渐变尺寸(scale)动画效果:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" > 
 <scale 
 android:duration="2000" 
 android:fillAfter="false" 
 android:fromXScale="0.0" 
 android:fromYScale="0.0" 
 android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
 android:pivotX="50%" 
 android:pivotY="50%" 
 android:toXScale="1.1" 
 android:toYScale="1.1" /> 
</set> 

下面简单说明了scale的各个属性:

<!-- 尺寸伸缩动画效果 scale  
       属性:interpolator 指定一个动画的插入器  
       常见动画插入器:  
            accelerate_decelerate_interpolator  加速-减速 动画插入器  
            accelerate_interpolator        加速-动画插入器  
            decelerate_interpolator        减速- 动画插入器  
            anticipate_interpolator 先回退一小步然后加速前进  
            anticipate_overshoot_interpolator   在上一个基础上超出终点一小步再回到终点  
            bounce_interpolator 最后阶段弹球效果  
            cycle_interpolator  周期运动  
            linear_interpolator 匀速  
            overshoot_interpolator  快速到达终点并超出一小步最后回到终点  
      浮点型值:  
 
            fromXScale 属性为动画起始时 X坐标上的伸缩尺寸      
            toXScale   属性为动画结束时 X坐标上的伸缩尺寸       
 
            fromYScale 属性为动画起始时Y坐标上的伸缩尺寸      
            toYScale   属性为动画结束时Y坐标上的伸缩尺寸      
 
            说明:  
                 以上四种属性值      
 
                    0.0表示收缩到没有   
                    1.0表示正常无伸缩       
                    值小于1.0表示收缩    
                    值大于1.0表示放大  
 
            pivotX     属性为动画相对于物件的X坐标的开始位置  
            pivotY     属性为动画相对于物件的Y坐标的开始位置  
 
            说明:  
                    以上两个属性值 从0%-100%中取值  
                    50%为物件的X或Y方向坐标上的中点位置  
 
        长整型值:  
            duration  属性为动画持续时间  
            说明:   时间以毫秒为单位  
 
        布尔型值:  
            fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用  
-->  

最下面的箭头标示使用了混合动画:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
 android:repeatMode="reverse" > 
 
 <translate 
 android:duration="1000" 
 android:fromXDelta="0" 
 android:fromYDelta="-15" 
 android:repeatCount="infinite" 
 android:toXDelta="0" 
 android:toYDelta="20" /> 
 
 <alpha 
 android:duration="1000" 
 android:fromAlpha="1.0" 
 android:repeatCount="infinite" 
 android:toAlpha="0.3" /> 
 
</set> 

混合动画是set集合,包含了平移动画(translate)和渐变动画(alpha),对这两动画简单说明:

<alpha  
      android:duration="1000"  
      android:fromAlpha="1.0"  
      android:repeatCount="infinite"  
      android:toAlpha="0.3" />  
  <!--  
       透明度控制动画效果 alpha  
      浮点型值:  
          fromAlpha 属性为动画起始时透明度  
          toAlpha   属性为动画结束时透明度  
          说明:   
              0.0表示完全透明  
              1.0表示完全不透明  
          以上值取0.0-1.0之间的float数据类型的数字  
 
      长整型值:  
          duration  属性为动画持续时间  
          说明:       
              时间以毫秒为单位  
      整型值:          
          repeatCount:重复次数  
          说明:  
          infinite:循环执行,  
          具体正整数表示循环次数  
 
           repeatMode:重复模式,  
           说明:  
              restart:重新从头开始执行  
              reverse:反方向执行  
 
  -->  
<translate  
     android:duration="1000"  
     android:fromXDelta="0"  
     android:fromYDelta="-15"  
     android:repeatCount="infinite"  
     android:toXDelta="0"  
     android:toYDelta="20" />  
 <!-- translate 平移动画效果  
     整型值:  
         fromXDelta 属性为动画起始时 X坐标上的位置      
         toXDelta   属性为动画结束时 X坐标上的位置  
         fromYDelta 属性为动画起始时 Y坐标上的位置  
         toYDelta   属性为动画结束时 Y坐标上的位置  
         注意:  
                  没有指定fromXType toXType fromYType toYType 时候,  
                  默认是以自己为相对参照物  ,默认参考物最重要           
     长整型值:  
         duration  属性为动画持续时间  
         说明:   时间以毫秒为单位  
gt;  

中间的电池动画使用了旋转(rotate)动画和渐变尺寸动画的组合:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" > 
 
 <scale 
 android:duration="800" 
 android:fillAfter="false" 
 android:fromXScale="0.0" 
 android:fromYScale="0.0" 
 android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
 android:pivotX="50%" 
 android:pivotY="50%" 
 android:toXScale="1.2" 
 android:toYScale="1.2" /> 
 
 <rotate 
 android:duration="3000" 
 android:fromDegrees="0" 
 android:pivotX="50%" 
 android:pivotY="50%" 
 android:repeatCount="-1" 
 android:toDegrees="359.0" /> 
 
</set> 

前面介绍了渐变尺寸动画,下面只介绍旋转动画:

  <rotate  
        android:duration="3000"  
        android:fromDegrees="0"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:repeatCount="-1"  
        android:toDegrees="359.0" />  
    <!-- rotate 旋转动画效果  
       属性:interpolator 指定一个动画的插入器  
 
       浮点数型值:  
            fromDegrees 属性为动画起始时物件的角度      
            toDegrees   属性为动画结束时物件旋转的角度 可以大于360度     
 
 
            说明:  
                     当角度为负数——表示逆时针旋转  
                     当角度为正数——表示顺时针旋转                
                     (负数from——to正数:顺时针旋转)     
                     (负数from——to负数:逆时针旋转)   
                     (正数from——to正数:顺时针旋转)   
                     (正数from——to负数:逆时针旋转)         
 
            pivotX     属性为动画相对于物件的X坐标的开始位置  
            pivotY     属性为动画相对于物件的Y坐标的开始位置  
 
            说明:        以上两个属性值 从0%-100%中取值  
                         50%为物件的X或Y方向坐标上的中点位置  
 
        长整型值:  
            duration  属性为动画持续时间  
            说明:       时间以毫秒为单位  
-->  

电子表闪动动画使用animation-list实现的逐帧动画:

<?xml version="1.0" encoding="utf-8"?> 
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
 android:oneshot="false" > 
<!--     
    根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画    
    根标签下,通过item标签对动画中的每一个图片进行声明    
    android:duration 表示展示所用的该图片的时间长度    
 --> 
 <item 
 android:drawable="@drawable/tutorial1_icon1" 
 android:duration="200"/> 
 <item 
 android:drawable="@drawable/tutorial1_icon2" 
 android:duration="200"/> 
 
</animation-list> 

Anima启动:

t1_icon1.setImageResource(R.drawable.t1_frame_animation);  
            t1_icon1_animationDrawable = (AnimationDrawable) t1_icon1  
                    .getDrawable();  
            t1_icon1_animationDrawable.start();  

图二动画效果: 

    图二中最上面的“极小安装”动画和最下面的箭头动画和图一中一样,不做过多介绍,中间动画使用的尺寸渐变动画,和图一中的尺寸渐变动画一样,也不多介绍。

图三动画效果: 

    图二中最上面的“极速流畅”动画和最下面的箭头动画和图一中一样,不做过多介绍。中间效果使用了云移动效果使用了平移动画,火箭喷气效果使用了animation-list的逐帧动画。逐帧动画就不多说了,这里的平移动画没有使用xml文件实现,使用的java代码,为了适配多种屏幕,需要计算平移的初始位置,代码定义了几个位置:

view3.getViewTreeObserver().addOnGlobalLayoutListener(  
 new OnGlobalLayoutListener() {  
 
 @Override 
 public void onGlobalLayout() {  
 // TODO Auto-generated method stub 
 int h1 = centerLayout.getTop();  
 int h2 = centerLayout.getBottom();  
                    DensityUtil densityUtil = new DensityUtil(  
                            MainActivity.this);  
 int w = densityUtil.getScreenWidth();  
 
                    fx1 = t3_icon2.getTop() + t3_icon2.getHeight();  
                    fy1 = -t3_icon2.getTop() - t3_icon2.getHeight();  
                    tx1 = -t3_icon2.getWidth() - t3_icon2.getLeft();  
                    ty1 = t3_icon2.getTop() + t3_icon2.getLeft()  
                            + t3_icon2.getWidth();  
 
                    fx2 = t3_icon3.getTop() + t3_icon3.getHeight();  
                    fy2 = -t3_icon3.getTop() - t3_icon3.getHeight();  
                    tx2 = -t3_icon3.getWidth() - t3_icon3.getLeft();  
                    ty2 = t3_icon3.getTop() + t3_icon3.getLeft()  
                            + t3_icon3.getWidth();  
 
                    fx3 = w - t3_icon4.getLeft();  
                    fy3 = -(w - t3_icon4.getLeft());  
                    tx3 = -(h2 - h1 - t3_icon4.getTop());  
                    ty3 = h2 - h1 - t3_icon4.getTop();  
 
                    fx4 = w - t3_icon5.getLeft();  
                    fy4 = -(w - t3_icon5.getLeft());  
                    tx4 = -(h2 - h1 - t3_icon5.getTop());  
                    ty4 = h2 - h1 - t3_icon5.getTop();  
                }  
            });  

图四动画效果:

    图四中“墨迹天气3.0”图片使用了RotateAnimation,动画插值器使用的CycleInterpolator,“全面革新 我是极致控”使用的渐变尺寸动画。

int pivot = Animation.RELATIVE_TO_SELF;  
            CycleInterpolator interpolator = new CycleInterpolator(3.0f);  
            RotateAnimation animation = new RotateAnimation(0, 10, pivot,  
 0.47f, pivot, 0.05f);  
            animation.setStartOffset(500);  
            animation.setDuration(3000);  
            animation.setRepeatCount(1);// Animation.INFINITE 
            animation.setInterpolator(interpolator);  
            t4_icon1.startAnimation(animation)

上面基本实现了墨迹天气的动画效果。

资源库下载:http://download.csdn.net/detail/xyz_lmn/7094071

案例apk下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WCF技术剖析之十六:数据契约的等效性和版本控制

    数据契约是对用于交换的数据结构的描述,是数据序列化和反序列化的依据。在一个WCF应用中,客户端和服务端必须通过等效的数据契约方能进行有效的数据交换。随着时间的推...

    蒋金楠
  • flash读取XML 背景自动适应大小

    var bg = new Object(); bg.bgdoc_xml = new XML(); bg.parse_XML = function() {    ...

    用户1172164
  • asp.net生成静态页

    做个生成静态页示例: 采用替换模版页的形式生成静态页 第一步:新建项目,创建一个简单模版页:TemplatePage.htm <!DOCTYPE html PU...

    Porschev
  • CaseStudy(showcase)数据篇-从XML中获取数据

    做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

    用户1172164
  • sl 2.0 重要更新

    更新Silverlight.js 更新项目模板 错误代码不再会为空 更新2-D API 支持HttpWebRequest/HttpWebResponse...

    用户1172164
  • Spring集成RabbitMQ-使用RabbitMQ更方便

    如果提到Spring,你脑海中对他的印象还停留在SSH三大框架之一,那或许你该好好重新认识这个家伙。 在IT技术日新月异的今天,他还能让你忘不了并与他朝夕相处,...

    JackieZheng
  • 建立可扩展的silverlight 应用框架 step-6

    整理导航模块“LeftNav” 首先说一下我想要实现的效果。 我希望在左侧的导航点击了以后右侧的主体部分发声变化。 之前我在LeftNav模块用的控件是Togg...

    用户1172164
  • 照虎画猫写自己的Spring——自定义注解

    Fairy已经实现的功能 读取XML格式配置文件,解析得到Bean 读取JSON格式配置文件,解析得到Bean 基于XML配置的依赖注入 所以,理所当然,今天该...

    JackieZheng
  • SQL Server 2005:一个使用新创建的User的问题和解决方法

    昨天在写一个SQLXML的Sample的时候,在SQL Server 2005添加新的User的时候出了一系列的问题,觉得这是一个很Common的问题,今天我把...

    蒋金楠
  • silverlight于javascript通信

    silverlight小技巧 silverlight于javascript通信 在 silverlight中可以直接使用“HtmlPage.Windo...

    用户1172164

扫码关注云+社区

领取腾讯云代金券