当前标签 / 动画 / 总共3篇

Web前端基础（18）jQuery中的动画

· 大约 200 个字 · 预计 1 分钟 读完
Web前端 · 基础
Web前端 · 基础 · jQuery · 动画

show()和hide()

show()和hide()是jQuery中最基本的动画方法，该动画操作了display:none;

1
2
3
4
5
6
7

$(function(){
    $("#panel").toggle(function(){
        $(this).next().hide();
    }, function(){
        $(this).next().show();
    })
})

show()和hide()可以传入动画执行毫秒数或者传入“nomal”, “slow”, “fast"关键字控制速度。

fadeIn()和fadeOut()

fadeIn()和fadeOut()只是改变透明度。

slideUp()和slideDown()

slideUp()和slideDown()只会改变元素的高度（由上到下展开， 由下到上收起）。

自定义动画animate() 

1

animate(params, speed, callback);

参数说明： params: 一个包含样式属性和值的映射 speed:速度参数，可选 callback:动画完成时执行的函数，可选

1
2
3
4
5

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px"}, 3000);
    })
})

阅读更多

Android实现的一个点赞动画

· 大约 1100 个字 · 预计 5 分钟 读完
Android · 动画
Android · 动画 · 自定义View

摘要

使用Canvas和状态模式实现一个点赞效果

点赞动画效果

关键步骤

1. 获取Bitmap对象和Bitmap对象释放。

创建

1

BitmapFactory.decodeResource(getResources(), R.drawable.encourage_gif_big);

回收

1
2
3
4
5

if(bitmap != null && !bitmap.isRecycled()){   
        bitmap.recycle();   
        bitmap = null;   
}   
System.gc();

如果图片过大可以压缩

1
2
3
4
5
6

//压缩，用于节省BITMAP内存空间--解决BUG的关键步骤    
BitmapFactory.Options opts = new BitmapFactory.Options();   
opts.inSampleSize = 2;    //这个的值压缩的倍数（2的整数倍），数值越小，压缩率越小，图片越清晰    
   
//返回原图解码之后的bitmap对象    
bitmap = BitmapFactory.decodeResource(Context, ResourcesId, opts);

2. 创建画笔，设置画笔。

1
2
3

mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setAlpha(255);

3. canvas绘制Bitmap

1
2
3
4

float scale = 1 - (1f - END_SCALE) / TOTAL_TIME * currentTime;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mLikesBitmap, matrix, mBitmapPaint);

4. 分析动画状态，分解状态

动画状态

将动画过程分解成几个阶段，然后定义基类（模板方法）

5. 计算各个状态的变化过程，用总时间等分绘制。

1

float scale = 1 - (1f - END_SCALE) / TOTAL_TIME * currentTime;

关键点

  1. 简单自定义View实现

重写onDraw()

  1. 状态模式的使用

分解状态，将复杂问题拆分解决的思路。

阅读更多

PhysicsBasedAnimation学习

· 大约 500 个字 · 预计 3 分钟 读完
Android · 动画
Android · Animation · Physics · 动画

概述

Google I/O 17推出了许多新的特性，在动画这一块又有新的API供开发者使用，具体视频请见Android Animations Spring to Life (Google I/O ‘17)，主要介绍了Physics-based Animations，在动画API中引入了DynamicAnimation，并介绍了它的两个子类FlingAnimation和SpringAnimation的使用，开发者可以使用新的API创建更加动态化的动画。

Spring Animation

Spring Animation

FlingAnimation

FlingAnimation

阅读更多