您的位置：首页 > 移动开发 > Android开发

把HTML5绚丽的加载效果转换为Android实现

2014-03-03 14:35 302 查看
HTML5与CSS3做出来的特效让我很着迷，平时做Android开发，用惯了一些常用的加载进度框，今天看了HTML5的实现方式，于是想自己动手实现一下Android同样的效果，首先我先把HTML5的代码贴出来，然后分析HTML5的动画原理，然后用Android来实现，代码如下：

<html>
<head>
<title>Chasing Dots</title>
<style>
.spinner {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #333;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg)
}
}

@keyframes rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}

@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}

@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
</head>
<body>
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</body>
</html>


大家可以新建一个HTML文件，然后把这段代码放进去在Chrome里面跑一下，效果如图：





大家可以看见，网页里是2个圆圈不停的在转，感觉不在同一平面上，其实如果不仔细看这段HTML代码，很可能会想的过于复杂，其实实现起来非常容易，下面我们来一步步分析Android的做法，首先，创建一个sharp的xml文件，放到drawable下面，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >

<solid android:color="#33ccff" />

<size
android:height="25dp"
android:width="25dp" />

</shape>


这个是一个简单的圆形，然后我们创建一个自定义控件，对应的XML文件如下：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/circle_container"
android:layout_width="50dp"
android:layout_height="50dp"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/oval1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/sharp_oval"/>

<ImageView
android:id="@+id/oval2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/sharp_oval"/>

</LinearLayout>


然后，我们编写对应的自定义代码，如下：

package com.hrj.android.widget.html5;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.hrj.android.R;

public class CircleLoading extends LinearLayout {

private LinearLayout circleContainer;
private Context context;
private ImageView oval1;
private ImageView oval2;

public CircleLoading(Context context) {
this(context, null);
}

public CircleLoading(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.widget_circleloading, this, true);

circleContainer = (LinearLayout) findViewById(R.id.circle_container);
oval1 = (ImageView) circleContainer.findViewById(R.id.oval1);
oval2 = (ImageView) circleContainer.findViewById(R.id.oval2);

final Animation rotateAnimation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setInterpolator(new LinearInterpolator());
rotateAnimation.setDuration(2000);
rotateAnimation.setRepeatMode(Animation.RESTART);
rotateAnimation.setRepeatCount(Animation.INFINITE); //无限次数
circleContainer.setAnimation(rotateAnimation);

oval1.setAnimation(zoomIn(oval1, 2000));
oval2.setAnimation(zoomIn(oval2, 1000));
}

private ScaleAnimation zoomIn(final ImageView view, final int durationTime) {
final ScaleAnimation scaleAnim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnim.setDuration(durationTime); //设置动画持续时间
scaleAnim.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationEnd(Animation animation) {
view.setAnimation(zoomOut(view, durationTime));
}
});
return scaleAnim;
}

private ScaleAnimation zoomOut(final ImageView view, final int durationTime) {
final ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnim.setDuration(durationTime);
scaleAnim.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationEnd(Animation animation) {
view.setAnimation(zoomIn(view, durationTime));
}
});
return scaleAnim;
}

}


其实，通过上面的代码我们可以发现，我们建立了2个圆圈，一个在上面，一个在下面，放在一个LinearLayout里，然后把外面那层LinearLayout做旋转动画，里面的2个圆圈做缩放动画，第一个圆设置的时间长一点，第二个圆设置的时间短一点，然后就可以实现HTML5那段代码一样的效果了。

建立一个Activity，指向下面写的layout就可以看到效果了

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.hrj.android.widget.html5.CircleLoading
android:id="@+id/circle_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</com.hrj.android.widget.html5.CircleLoading>

</RelativeLayout>


以上是我的一些总结，代码还是比较简单，但是我觉得是一个不错的创意，抛砖引玉，以后大家看到HTML5比较绚的效果，也可以尝试用Android或IOS的native来实现试试。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航