一个绚丽的loading动效分析与实现!

前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loading,问我能不能实现,看了下效果确实不错,也还比较有新意,复杂度也不是非常高,所以就花时间给做了,我们先一起看下原gif图效果: http://finalshares.cn/attachment/1601/thread/81_15_e6ca53883925a24.gif (图传不上来)

源码下载

从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生; 2.叶子随着一条正余弦曲线移动; 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针; 4.叶子遇到进度条,似乎是融合进入; 5.叶子不能超出最左边的弧角; 7.叶子飘出时的角度不是一致,走的曲线的振幅也有差别,否则太有规律性,缺乏美感;

部分代码

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fed255" android:orientation="vertical" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="100dp"
    android:text="loading ..."
    android:textColor="#FFA800"
    android:textSize=" 30dp" />  

<RelativeLayout
    android:id="@+id/leaf_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp" >  

    <com.baidu.batterysaverDemo.ui.LeafLoadingView
        android:id="@+id/leaf_loading"
        android:layout_width="302dp"
        android:layout_height="61dp"
        android:layout_centerHorizontal="true" />  

    <ImageView
        android:id="@+id/fan_pic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="35dp"
        android:src="@drawable/fengshan" />  
</RelativeLayout>  

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent" >  

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >  

        <LinearLayout
            android:id="@+id/seek_content_one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp" >  

            <TextView
                android:id="@+id/text_ampair"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:textColor="#ffffa800"
                android:textSize="15dp" />  

            <SeekBar
                android:id="@+id/seekBar_ampair"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1" />  
        </LinearLayout>  

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal" >  

            <TextView
                android:id="@+id/text_disparity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:textColor="#ffffa800"
                android:textSize="15dp" />  

            <SeekBar
                android:id="@+id/seekBar_distance"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1" />  
        </LinearLayout>  

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal" >  

            <TextView
                android:id="@+id/text_float_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:textColor="#ffffa800"
                android:textSize="15dp" />  

            <SeekBar
                android:id="@+id/seekBar_float_time"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1" />  
        </LinearLayout>  

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal" >  

            <TextView
                android:id="@+id/text_rotate_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:textColor="#ffffa800"
                android:textSize="15dp" />  

            <SeekBar
                android:id="@+id/seekBar_rotate_time"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_weight="1" />  
        </LinearLayout>  

        <Button
            android:id="@+id/clear_progress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="去除进度条,玩转弧线"
            android:textSize="18dp" />  

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal" >  

            <Button
                android:id="@+id/add_progress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="增加进度: "
                android:textSize="18dp" />  

            <TextView
                android:id="@+id/text_progress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:textColor="#ffffa800"
                android:textSize="15dp" />  
        </LinearLayout>  
    </LinearLayout>  
</ScrollView>  

</LinearLayout> 最终效果如下,本来录了20+s,但是PS只能转5s,所以有兴趣的大家自己运行的玩吧:

源码下载

收藏 0分享浏览 3161
8年前
跟帖
暂无
说几句
广告位 点击查看投放指南

友情链接 大搜车前端团队博客
我的收藏