一款炫酷Loading动画--加载失败

简介

上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作。

相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了。

动画结构分析

首先我们来看失败动画的一张图:

失败动画的状态转移描述如下:

1、加载过程,画蓝色圆环,当进度为100%时,圆环完成

2、从右侧抛出蓝色小方块,小方块沿着曲线到达圆环正上方

3、小方块突然消失,红色感叹号逐渐出现

4、感叹号完整出现以后,圆环变红色,感叹号发生震动

由于前两个过程,和加载成功是一样的,所以我们主要来看过程3,4

红色感叹号逐渐出现

逐渐”,有这两个字,我们就应该知道这是一个动画效果。

将感叹号分成两个路径,较长的和较短的,剩下来的工作,就是我们将这个路径逐渐绘制出来。这个思路和之前的绿色勾等的绘制是一样的。

我们需要一个计时器,两个路径Path,和对应的PathMeasure

这里我们结合代码说得更清楚些,路径是这样的:

        //感叹号路径
        Path commaPath1 = new Path();
        Path commaPath2 = new Path();
        commaPath1.moveTo(2f * radius+strokeWidth, 1.25f * radius+strokeWidth);
        commaPath1.lineTo(2f * radius+strokeWidth, 2.25f * radius+strokeWidth);
        commaPath2.moveTo(2f * radius+strokeWidth, 2.75f * radius+strokeWidth);
        commaPath2.lineTo(2f * radius+strokeWidth, 2.5f * radius+strokeWidth);
        commaPathMeasure1 = new PathMeasure(commaPath1,false);
        commaPathMeasure2 = new PathMeasure(commaPath2,false);

计时器就简单了,是一个ValueAnimator

        //感叹号动画
        mCommaAnimation = ValueAnimator.ofFloat(0f, 1f);
        mCommaAnimation.setDuration(500);
        mCommaAnimation.setInterpolator(new AccelerateInterpolator());
        mCommaAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                commaPrecent = (float) animation.getAnimatedValue();
                invalidate();
            }
        });

最后,利用PathMeasure计算出的部分路径,就可以逐渐将完整路径绘制出来

    /**
     * 绘制感叹号
     */
    private void drawComma(Canvas canvas) {
        Path path1 = new Path();
        commaPathMeasure1.getSegment(0, commaPrecent * commaPathMeasure1.getLength(), path1, true);
        path1.rLineTo(0, 0);
        Path path2 = new Path();
        commaPathMeasure2.getSegment(0, commaPrecent * commaPathMeasure2.getLength(), path2, true);
        path2.rLineTo(0, 0);
        canvas.drawPath(path1, commaPaint);//较长
        canvas.drawPath(path2, commaPaint);//较短
        canvas.drawArc(mRectF, 0, 360, false, commaPaint);//红色圆环
    }

红色感叹号震动

震动效果怎么实现了,我的思路是旋转画布!

仔细观察震动效果,会发现过程是这样的:

向左偏移-》回到中间-》向右偏移-》回到中间-》向左偏移-》。。。

这意味着震动其实是一个快速偏移的过程,但是要偏移一定角度,再绘制感叹号会比较麻烦。我想出来的办法,就是将画布偏移,而不是将感叹号偏移

于是我们的计时器是这样的:

        //震动动画
        mshockAnimation = ValueAnimator.ofInt(-1, 0, 1, 0, -1, 0,1,0);
        mshockAnimation.setDuration(1000);

        mshockAnimation.setInterpolator(new LinearInterpolator());
        mshockAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                shockPrecent = (int) animation.getAnimatedValue();
                invalidate();
            }

        });

如果是-1,画布就向左旋转30度,0就不旋转,1就向右旋转30度。

/**
     * 绘制震动效果
     * @param canvas
     */
    private void drawShockComma(Canvas canvas) {
        Path path1 = new Path();
        commaPathMeasure1.getSegment(0, commaPathMeasure1.getLength(), path1, true);
        path1.rLineTo(0, 0);
        Path path2 = new Path();
        commaPathMeasure2.getSegment(0, commaPathMeasure2.getLength(), path2, true);
        path2.rLineTo(0, 0);

        if (shockPrecent!=0){
            canvas.save();
            if (shockPrecent==1)
                canvas.rotate(shockDir, 2 * radius, 2 * radius);
            else if(shockPrecent==-1)
                canvas.rotate(-shockDir, 2 * radius, 2 * radius);
        }
        canvas.drawPath(path1, commaPaint);
        canvas.drawPath(path2, commaPaint);
        canvas.drawArc(mRectF, 0, 360, false, commaPaint);
        if (shockPrecent!=0) {
            canvas.restore();
        }
    }

其中注意,canvas.save()方法和canvas.restore()方法必须成对使用,然后我们调用canvas.rotate()方法,就可以旋转画布了。

写在最后

有了前面的经验,失败动画其实就是新瓶装旧酒了,使用画布旋转来实现震动,这个思路也是比较有趣的。

对于API不熟悉的朋友,建议用到的时候去查官方文档,或者看看其他朋友的一些介绍基础的文章。

最后,提供源码下载地址github地址,欢迎大家下载和star。

时间: 2024-12-25 20:18:05

一款炫酷Loading动画--加载失败的相关文章

一款炫酷Loading动画--加载成功

简介 昨天在简书上看到一篇文章,介绍了一个加载动画的实现过程 一款Loading动画的实现思路(一) 只可惜原动画是IOS上制作的,而看了一下,作者的实现思路比较复杂,于是趁着空闲写了一个Android版本,这篇文章将给大家介绍一下实现过程. 首先让我们来看一下动画效果 动画结构分析 从上面的gif图中可以看到,这个加载动画有成功,失败两种状态,由于Gif速度比较快,我们再来分别看一张慢图 1.成功状态加载动画 成功动画的状态转移描述如下: 1.加载过程,画蓝色圆环,当进度为100%时,圆环完成

一款炫酷Loading动画--载入失败

简单介绍 上一篇文章一款炫酷Loading动画–载入成功.给大家介绍了成功动画的绘制过程,这篇文章将接着介绍载入失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比較简单了. 动画结构分析 首先我们来看失败动画的一张图: 失败动画的状态转移描写叙述例如以下: 1.载入过程,画蓝色圆环,当进度为100%时.圆环完毕 2.从右側抛出蓝色小方块.小方块沿着曲线到达圆环正上方 3.小方块突然消失.红色感叹号逐渐出现 4.感叹号完整出现以后.圆环变红色.感叹号发生震动 因为前两个过程,和

使用CSS3实现超炫的Loading(加载)动画效果(转)

使用CSS3实现超炫的Loading(加载)动画效果 SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) Loading 动画效果一 HTML 代码: 1 2 3 4 5 6 7 <

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

使用CSS3实现超炫的Loading(加载)动画效果

SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) Loading 动画效果一 HTML 代码: <div class="spinner"> <div c

使用 CSS3 实现超炫的 Loading(加载)动画效果

Loading 动画效果一 HTML 代码: 1 2 3 4 5 6 7 <div class="spinner">   <div class="rect1"></div>   <div class="rect2"></div>   <div class="rect3"></div>   <div class="rect4&qu

一款纯css3实现的动画加载导航

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="main-menu"> <li class="main-menu-item active"><a href="#">Home</a></li><li class="m

纯css3实现的动画加载条

之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapper"> <div class="bar"> <p class="text"> Loading b