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

Web前端基础(18)jQuery中的动画

show()和hide()

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

$(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()

animate(params, speed, callback);

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

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

阅读更多

Android实现的一个点赞动画

摘要

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

点赞动画效果

关键步骤

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

创建

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

回收

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

如果图片过大可以压缩

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

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

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

3. canvas绘制Bitmap

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. 计算各个状态的变化过程,用总时间等分绘制。

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

关键点

  1. 简单自定义View实现

重写onDraw()

  1. 状态模式的使用

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

阅读更多

PhysicsBasedAnimation学习

概述

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

阅读更多