搜索热词动画效果

来源：互联网发布：郑州造价软件培训班编辑：程序博客网时间：2024/04/28 00:54

首先看一下效果图：

现在来说它是如何实现的，其实很简单，这十个热词是用十个TextView实现的，分别为这十个TextView设置10种不同的动画，让它们各自平行移动一个随机的坐标值后，就出现了这种效果。

代码如下：

<FrameLayout                    android:id="@+id/hot_key_layout"                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                     >                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key1"                            style="@style/hot_key1"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey1_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey1_layout_marginTop"                            android:background="@android:color/transparent"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey1_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key2"                            style="@style/hot_key2"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey2_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey2_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey2_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key3"                            style="@style/hot_key3"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey3_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey3_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey3_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key4"                            style="@style/hot_key4"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey4_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey4_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey4_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key5"                            style="@style/hot_key5"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey5_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey5_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey5_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key6"                            style="@style/hot_key6"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey6_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey6_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey6_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key7"                            style="@style/hot_key7"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey7_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey7_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey7_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key8"                            style="@style/hot_key8"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey8_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey8_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey8_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key9"                            style="@style/hot_key9"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey9_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey9_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey9_textSize" />                    </LinearLayout>                    <LinearLayout                        android:layout_width="fill_parent"                        android:layout_height="fill_parent" >                        <TextView                            android:id="@+id/hot_key10"                            style="@style/hot_key10"                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_marginLeft="@dimen/search_hotkey10_layout_marginLeft"                            android:layout_marginTop="@dimen/search_hotkey10_layout_marginTop"                            android:singleLine="true"                            android:textSize="@dimen/search_hotkey10_textSize" />                    </LinearLayout>

要用到的style定义：

  <style name="hot_key1">        <item name="android:textColor">#e96800</item>    </style>    <style name="hot_key2">        <item name="android:textColor">#f98f12</item>    </style>    <style name="hot_key3">        <item name="android:textColor">#9061fb</item>    </style>    <style name="hot_key4">        <item name="android:textColor">#46b2ac</item>    </style>    <style name="hot_key5">        <item name="android:textColor">#e562f5</item>    </style>    <style name="hot_key6">        <item name="android:textColor">#4c8aad</item>    </style>    <style name="hot_key7">        <item name="android:textColor">#99cc33</item>    </style>    <style name="hot_key8">        <item name="android:textColor">#2b90f7</item>    </style>    <style name="hot_key9">        <item name="android:textColor">#fa5b5b</item>    </style>    <style name="hot_key10">        <item name="android:textColor">#51c27c</item>    </style>

要用到的Dimension定义：

<dimen name="search_hotkey1_layout_marginLeft">108dip</dimen><dimen name="search_hotkey1_layout_marginTop">0dip</dimen><dimen name="search_hotkey1_textSize">35dip</dimen><dimen name="search_hotkey2_layout_marginLeft">198dip</dimen><dimen name="search_hotkey2_layout_marginTop">53dip</dimen><dimen name="search_hotkey2_textSize">14dip</dimen><dimen name="search_hotkey3_layout_marginLeft">41dip</dimen><dimen name="search_hotkey3_layout_marginTop">66dip</dimen><dimen name="search_hotkey3_textSize">20dip</dimen><dimen name="search_hotkey4_layout_marginLeft">184dip</dimen><dimen name="search_hotkey4_layout_marginTop">95dip</dimen><dimen name="search_hotkey4_textSize">26dip</dimen><dimen name="search_hotkey5_layout_marginLeft">65dip</dimen><dimen name="search_hotkey5_layout_marginTop">116dip</dimen><dimen name="search_hotkey5_textSize">13dip</dimen><dimen name="search_hotkey6_layout_marginLeft">181dip</dimen><dimen name="search_hotkey6_layout_marginTop">143dip</dimen><dimen name="search_hotkey6_textSize">13dip</dimen><dimen name="search_hotkey7_layout_marginLeft">107dip</dimen><dimen name="search_hotkey7_layout_marginTop">149dip</dimen><dimen name="search_hotkey7_textSize">11dip</dimen><dimen name="search_hotkey8_layout_marginLeft">38dip</dimen><dimen name="search_hotkey8_layout_marginTop">178dip</dimen><dimen name="search_hotkey8_textSize">19dip</dimen><dimen name="search_hotkey9_layout_marginLeft">212dip</dimen><dimen name="search_hotkey9_layout_marginTop">189dip</dimen><dimen name="search_hotkey9_textSize">19dip</dimen><dimen name="search_hotkey10_layout_marginLeft">142dip</dimen><dimen name="search_hotkey10_layout_marginTop">213dip</dimen><dimen name="search_hotkey10_textSize">17dip</dimen>

java代码如下：

// create animation for hot key comingTextView word1 = findViewById(R.id.hot_key1);word1.setText(hotwordsList.get(0));word1.startAnimation(getAnimation(0, -((float) (Math.random() * 5) + 2)));TextView word2 = findViewById(R.id.hot_key2);word2.setText(hotwordsList.get(8));word2.startAnimation(getAnimation((float) ((Math.random() * 5) + 2),-((float) (Math.random() * 5) + 2)));TextView word3 = findViewById(R.id.hot_key3);word3.setText(hotwordsList.get(2));word3.startAnimation(getAnimation(-((float) ((Math.random() * 5) + 2)),-((float) (Math.random() * 5) + 2)));TextView word4 = findViewById(R.id.hot_key4);word4.setText(hotwordsList.get(1));word4.startAnimation(getAnimation((float) ((Math.random() * 5) + 2), 0));TextView word5 = findViewById(R.id.hot_key5);word5.setText(hotwordsList.get(7));word5.startAnimation(getAnimation(-((float) ((Math.random() * 5) + 2)),0));TextView word6 = findViewById(R.id.hot_key6);word6.setText(hotwordsList.get(6));word6.startAnimation(getAnimation((float) ((Math.random() * 5) + 2), 0));TextView word7 = findViewById(R.id.hot_key7);word7.setText(hotwordsList.get(9));word7.startAnimation(getAnimation(-((float) ((Math.random() * 5) + 2)),0));TextView word8 = findViewById(R.id.hot_key8);word8.setText(hotwordsList.get(3));word8.startAnimation(getAnimation(-((float) ((Math.random() * 5) + 2)),(float) (Math.random() * 5) + 2));TextView word9 = findViewById(R.id.hot_key9);word9.setText(hotwordsList.get(5));word9.startAnimation(getAnimation((float) ((Math.random() * 5) + 2),(float) (Math.random() * 5) + 2));TextView word10 = findViewById(R.id.hot_key10);word10.setText(hotwordsList.get(4));word10.startAnimation(getAnimation(0, (float) (Math.random() * 5) + 2));

getAnimation方法：

// create hot key animation: fly from random side position to setting center// positionprivate Animation getAnimation(float posFromX, float posFromY) {Animation anim = null;anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, posFromX,Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,posFromY, Animation.RELATIVE_TO_SELF, 0.0f);anim.setDuration(2000);return anim;}

更多参考资料：

http://blog.csdn.net/nmzkchina/article/details/7646175

http://blog.csdn.net/sodino/article/details/7176796

END