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

最新推荐文章于 2021-06-20 14:58:40 发布

heruijun

最新推荐文章于 2021-06-20 14:58:40 发布

阅读量2.7k

点赞数

分类专栏：加载框 Android HTML5 界面文章标签： android html5 android开发动画 css3

本文链接：https://blog.csdn.net/heruijun/article/details/20371541

版权

Android 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

加载框

1 篇文章 0 订阅

订阅专栏

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来实现试试。

heruijun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
把HTML5绚丽的加载效果转换为Android实现

HTML5与CSS3做出来的特效让我很着迷，平时做Android开发，用惯了一些常用的加载进度框，今天看了HTML5的实现方式，于是想自己动手实现一下Android同样的效果，首先我先把HTML5的代码贴出来，然后分析HTML5的动画原理，然后用Android来实现，代码如下： Chasing Dots .spinner {
复制链接

扫一扫