自定义View时,用到Paint Canvas的一些温故,简单的帧动画(动画一 ,"掏粪男孩Gif"顺便再提提onWindowFocusChanged)

简介:

转载请注明出处:王亟亟的大牛之路

之前在绘画的过程中提到了静态的旋转啊,缩放啊,平移等一些效果。那么自定义的View当然也有动态的效果也就是我们的Animation,常用的有三种

View Animation
Drawable Animation
Property Animation

这一篇讲一下简单的Drawable Animation。

Drawable Animation实现好是什么个样子呢?

帧动画,一张一张的图片,一次播形成动画的景象。

这里写图片描述

效果就是如此,把一帧一帧的图品相机播放,形成动画的效果。

Who to do?

简单的看你可以用handle然后诸如runOnUIThread来做这些事,但是view既然提供了这样的实现,那为什么不用呢?

首先,定义一个动画的xml(java代码运行,这里以XML声称为例),并且放在drable目录下

这里写图片描述

这里用的是back和positive做正放,倒放的事。

然后定义一下具体播放的图片内容以及持续时间

下面以倒播为例

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item
        android:drawable="@drawable/draw9"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw8"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw7"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw6"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw5"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw4"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw3"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/draw1"
        android:duration="500"/>
</animation-list>

再之后用按钮把动画开启,结束就OK了 十分简单

    @Override
    public void onClick(View v) {
        int flag = v.getId();
        anim = (AnimationDrawable) animImageView.getDrawable();
        switch (flag) {
            case R.id.startAnim:
                animImageView.setImageResource(R.drawable.positive_anim);
                anim.start();
                break;
            case R.id.toppleAnim:
                animImageView.setImageResource(R.drawable.back_anim);
                anim.start();
                break;
            case R.id.stopAnim:
                anim.stop();
                break;
        }
    }

顺道再讲讲onWindowFocusChanged,在之前测绘图片大小的时候已经看到了他的身影,那么他是具体做什么的呢?

其实在我们Activity执行的初期像onStart, onResume, onCreate其实我们的整个页面并没有完成渲染,所以这也就是我们为什么无法获取控件的长宽。

当你的Activity一获得就会调用这个方法

@Override

public
 void onWindowFocusChanged(boolean hasFocus) { 
    // TODO Auto-generated method stub 
    super.onWindowFocusChanged(hasFocus);
}

我们知道onResume也是Activity获取屏幕焦点时会被调用,那么2者又有什什么区别呢?

我们通过实验,用代码的Log来解释二者的区别

  @Override
    protected void onResume() {
        super.onResume();
        Log.d("--->onResume", "onResume");
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        Log.d("-->onWindowFocusChanged", "--->AnimActivity onWindowFocusChanged");
        if (hasFocus) {
            anim.start();
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        Log.d("--->onPause", "onPause");
    }

进入Activity时

01-04 16:57:24.131 5129-5129/paintcanvasdemo.pro.wjj.paintcanvasdemo D/--->onResume: onResume
01-04 16:57:24.161 5129-5129/paintcanvasdemo.pro.wjj.paintcanvasdemo D/-->>onWindowFocusChanged: --->AnimActivity onWindowFocusChanged

Home退出时

01-04 16:58:33.581 5129-5129/paintcanvasdemo.pro.wjj.paintcanvasdemo D/--->onPause: onPause
01-04 16:58:33.601 5129-5129/paintcanvasdemo.pro.wjj.paintcanvasdemo D/-->>onWindowFocusChanged: --->AnimActivity onWindowFocusChanged

当然,其中还参杂着onStop,onRestart,onStart。但是只要我们的Activity产生了焦点层面的变化他都可以监听到,关键是,他已经做100%交互式的逻辑了,而部分内容在onResume这里还无法做到(没有完全渲染结束)。

源码地址:https://github.com/ddwhan0123/BlogSample/tree/master/PaintCanvasDemo

这里写图片描述

记得点个赞哦!

目录
相关文章
|
前端开发 人机交互
Cocos Creator3.8 项目实战(四)巧用九宫格图像拉伸
Cocos Creator3.8 项目实战(四)巧用九宫格图像拉伸
431 0
|
图形学
unity3d UI特效处理,image置灰shader
新建材质,材质指定该shader,然后将材质球拖拽到image上面,效果就显示出来了 图片.png Shader "UI/ImageGreyShader" { Properties { [PerRendere...
3286 0
|
前端开发 开发者
|
前端开发 JavaScript
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
Egret学习笔记 (Egret打飞机-3.实现背景循环滚动)
Egret学习笔记 (Egret打飞机-3.实现背景循环滚动)
132 0
|
Web App开发 前端开发
嘿,朋友,其实 CSS 动画超简单的 - 时间函数篇(贝塞尔曲线、steps,看完还不懂算我输)
时间函数在 CSS 动画中至关重要,它会直接影响到动画的展现效果,然而由于相对其它属性而言较为复杂,可能了解的人较少,今天详细讲一讲时间函数。
|
前端开发 JavaScript
为何使用 Canvas 内元素动画总是在颤抖?
## 背景 过年的项目中遇到一个问题让我百思不得其解,明明我的帧率保持在60帧,为何我的动画却一直抖动? 我的场景是一个匀速直线运动的物体。 先上一个 [Demo](https://codepen.io/fanmingfei/pen/JvYdWW) 在这个 Demo 中,小姐姐是按照 x 轴 10px/s,y 轴 30 px/s 进行移动的,不过她的移动是明显伴随着抖动的。
1278 0
|
数据可视化 开发工具 图形学
从零开始制作Roll-a-ball tutoria滚动的小游戏(Unity3D)
Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。 Unity官网设计编写了一系列比较简单的入门教程,今天我们就来看看教程的内容吧。
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1219 0
|
前端开发 容器
Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)
原文:Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)   说到对象的旋转,或许就会联想到对象角度的概念。
982 0