动画
Android L动画 - 吴明
- Touch feedback(触摸反馈)
- 波纹有边界
- 波纹超出边界
- 波纹颜色
- Reveal effect(揭露效果)
- liecap
- Circular Reveal动画
- Activity transitions(Activity转换效果)
- Enter(进入)
- 普通Transition
- explode:从场景的中心移入或移出
- slide:从场景的边缘移入或移出
- fade:调整透明度产生渐变效果
- Shared Elements Transition 共享元素转换:共享两个 acitivity中共同的元素
- changeBounds - 改变目标视图的布局边界
- changeClipBounds - 裁剪目标视图边界
- changeTransform - 改变目标视图的缩放比例和旋转角度 changeImageTransform - 改变目标图片的大小和缩放比例
- 普通Transition
- Exit(退出)
- demo地址
- Enter(进入)
objectorAnimator 动画 王进
动画类型
- View Animation(Tween Animation 补间动画)
只能支持简单的缩放、平移、旋转、透明度等基本的动画,且有一定的局限性
动画时View的真正的View的属性保持不变,实际位置未改变
原理:提供动画的起始和结束状态信息,中间的状态根据上述类里差值器算法填充 - Drawable Animation(Frame Animation 帧动画)
- Property Animation(属性动画)
它更改的是对象的实际属性,
Property Animation属性
- Duration:动画的持续时间
- TimeInterpolation:属性值的计算方式,如先快后慢
- TypeEvaluator:根据属性的开始、结束值与TimeInterpolation计算出的因子计算出当前时间的属性值
- Repeat Count and behavoir:重复次数与方式,如播放3次、5次、无限循环,可以此动画一直重复,或播放完时再反向播放
- Animation sets:动画集合,即可以同时对一个对象应用几个动画,这些动画可以同时播放也可以对不同动画设置不同开始偏移
- Frame refreash delay:多少时间刷新一次,即每隔多少时间计算一次属性值,默认为10ms,最终刷新时间还受系统进程调度与硬件的影响
Property Animation 动画流程
ValueAnimator
ValueAnimator包含Property Animation动画的所有核心功能,如动画时间,开始、结束属性值,相应时间属性值计算方法等。应用Property Animation有两个步聚:
- 计算属性值
- 根据属性值执行相应的动作,如改变对象的某一属性。(需要在onAnimationUpdate中传入执行动画的对象)
ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f); animation.setDuration(1000); animation.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { Log.i("update", ((Float) animation.getAnimatedValue()).toString()); //这个函数中会传入ValueAnimator对象做为参数,通过这个ValueAnimator对象的getAnimatedValue()函数可以得到当前的属性值 } }); animation.setInterpolator(new CycleInterpolator(3)); animation.start();
ObjectAnimator
ObjectAnimator继承自ValueAnimator,要指定一个对象及该对象的一个属性,例如
- 常用方法有ofFloat(),ofInt(),ofObject(),ofArgb(),ofPropertyValuesHolder()。
- 属性动画可用的属性
答案是:任何一切带有set开头的方法属性名字。可能我们常用的有: - 平移 translationX,translationY, X,Y。
- 缩放 scaleX,scaleY。
- 旋转 rotationX, rotationY。
- 透明度 alpha。
也就是说我们所有控件都有以上setTranslationX(),setScaleX(),setRotationX(),setAlpha()等方法。
我们不仅限于这几个属性,就拿TextView控件来说,只要是TextView有的属性都可以用来实现动画效果,比如 字体大小:“textColor”,字体颜色“textSize”等。
限制:对象应该有一个setter函数:set
(驼峰命名法)及要有相应属性的getter方法:get
且应返回值类型应与相应的setter方法的参数类型一致。
如果上述条件不满足,则不能用ObjectAnimator,应用ValueAnimator代替。
ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, 'alpha', 1.0f, 0.3f, 1.0F);
animator.setDuration(2000);//动画时间
animator.setInterpolator(new BounceInterpolator());//动画插值
animator.setRepeatCount(-1);//设置动画重复次数
animator.setRepeatMode(ValueAnimator.RESTART);//动画重复模式
animator.setStartDelay(1000);//动画延时执行
animator.start();//启动动画
根据应用动画的对象或属性的不同,可能需要在onAnimationUpdate函数中调用invalidate()函数刷新视图。
组合动画
组合动画1–AnimatorSet的使用
这个类提供了一个play()方法,如果我们向这个方法中传入一个Animator对象(ValueAnimator或ObjectAnimator)将会返回一个AnimatorSet.Builder的实例,AnimatorSet.Builder中包括以下四个方法:- after(Animator anim) 将现有动画插入到传入的动画之后执行
- after(long delay) 将现有动画延迟指定毫秒后执行
- before(Animator anim) 将现有动画插入到传入的动画之前执行
- with(Animator anim) 将现有动画和传入的动画同时执行
Android 除了提供play(),还有playSequentially(),playTogether() 可供使用,可传入一个或者多个动画对象(,隔开),或者动画集合
ObjectAnimator animator = ObjectAnimator.ofInt(container, "backgroundColor", 0xFFFF0000, 0xFFFF00FF);
ObjectAnimator animator1 = ObjectAnimator.ofFloat(view, "translationX", 0.0f, 200.0f, 0f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(view, "scaleX", 1.0f, 2.0f);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(view, "rotationX", 0.0f, 90.0f, 0.0F);
ObjectAnimator animator4 = ObjectAnimator.ofFloat(view, "alpha", 1.0f, 0.2f, 1.0F);
//组合动画方式1
AnimatorSet set = new AnimatorSet();
((set.play(animator).with(animator1).before(animator2)).before(animator3)).after(animator4);
set.setDuration(5000);
set.start();
- 组合动画2–PropertyValuesHolder的使用
使用方法ObjectAnimator.ofPropertyValuesHolder(Object target,PropertyValuesHolder… values);第一个参数是动画的目标对象,之后的参数是PropertyValuesHolder类的实例,可以有多个这样的实例。代码如下:
```
PropertyValuesHolder valuesHolder = PropertyValuesHolder.ofFloat(“translationX”, 0.0f, 300.0f);
PropertyValuesHolder valuesHolder1 = PropertyValuesHolder.ofFloat(“scaleX”, 1.0f, 1.5f);
PropertyValuesHolder valuesHolder2 = PropertyValuesHolder.ofFloat(“rotationX”, 0.0f, 90.0f, 0.0F);
PropertyValuesHolder valuesHolder3 = PropertyValuesHolder.ofFloat(“alpha”, 1.0f, 0.3f, 1.0F);
ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(view, valuesHolder, valuesHolder1, valuesHolder2, valuesHolder3);
objectAnimator.setDuration(2000).start();
//类似于AnimatorSet.playTogether(Animator… items);
- **组合动画3-ViewPropertyAnimator(多属性动画)**
ViewPropertyAnimator animator5 = imageView.animate();
animator5.translationX(200).scaleX(2).setDuration(2000).start();
> 注意:使用ViewPropertyAnimator类需要API>=12
### 动画监听
- animator.addListener(new Animator.AnimatorListener(){});//监听动画开始,结束,取消,重复(四种都包括)
- animator.addListener(new AnimatorListenerAdapter(){});
推荐,可代替AnimatorListener,需要监听动画开始,结束,取消,重复那种就直接实现那种方法就行
其实AnimatorListenerAdapter的源码只是一个实现了AnimatorListener接口的抽象类而已
- animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){});
更加精确的方法来时刻监听当前动画的执行情况,可以读取到动画的每个更新值了
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
//可以根据自己的需要来获取动画更新值。
Log.e(‘TAG’, ‘the animation value is ‘ + value);
}
});
### Keyframes
keyFrame是一个 时间/值 对,通过它可以定义一个在特定时间的特定状态,即关键帧,而且在两个keyFrame之间可以定义不同的Interpolator,就好像多个动画的拼接,第一个动画的结束点是第二个动画的开始点。KeyFrame是抽象类,要通过ofInt(),ofFloat(),ofObject()获得适当的KeyFrame,然后通过PropertyValuesHolder.ofKeyframe获得PropertyValuesHolder对象,如以下例子:
/*
- 动画效果:btn对象的width属性值使其:
- 开始时 Width=400
- 动画开始1/4时 Width=200
- 动画开始1/2时 Width=400
- 动画开始3/4时 Width=100
- 动画结束时 Width=500
*/
Keyframe kf0 = Keyframe.ofInt(0, 400);
Keyframe kf1 = Keyframe.ofInt(0.25f, 200);
Keyframe kf2 = Keyframe.ofInt(0.5f, 400);
Keyframe kf4 = Keyframe.ofInt(0.75f, 100);
Keyframe kf3 = Keyframe.ofInt(1f, 500);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe(“width”, kf0, kf1, kf2, kf4, kf3);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(btn2, pvhRotation);
rotationAnim.setDuration(2000);
### Property Animation在XML中使用
- xml文件放在res/animator/中
<objectAnimator
android:propertyName='translationX'
android:valueFrom='0'
android:valueTo='200'
android:valueType='floatType' />
<set android:ordering='together'>
<objectAnimator
android:propertyName='scaleX'
android:valueFrom='1'
android:valueTo='2'
android:valueType='floatType' />
<objectAnimator
android:propertyName='rotationX'
android:valueFrom='0'
android:valueTo='90'
android:valueType='floatType' /><!--动画值的类型-->
</set>
- 通过AnimatorInflater.loadAnimator方法加载xml动画返回一个Animator的对象,然后调用setTarget方法给动画设置对象调用哪个start启动动画即可完成xml动画效果
Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);
animator.setTarget(view);
animator.start();
## 花花绿绿的ProgressBar 杨俊构
*参考[Android 基础入门教程]( http://www.runoob.com/w3cnote/android-tutorial-progressbar.html)*
- ProgressBar(进度条)是Android基本UI控件,ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用到进度条;或者当在进行一些比较 耗时的操作,需要等待一段较长的时间,这个时候如果没有提示,用户可能会以为程序Carsh或者手机死机 了,这样会大大降低用户体验,所以在需要进行耗时操作的地方,添加上进度条,让用户知道当前的程序 在执行中,也可以直观的告诉用户当前任务的执行进度等!使用进度条可以给我带来这样的便利!
- ProgressBar[官方API文档](http://androiddoc.qiniudn.com/reference/android/widget/ProgressBar.html),ProgressBar继承与View类,直接子类有AbsSeekBar和ContentLoadingProgressBar, 其中AbsSeekBar的子类有SeekBar和RatingBar,可见这二者也是基于ProgressBar实现的
![](http://7xohph.com1.z0.glb.clouddn.com/46760225.jpg)
- 常用属性详解:
> - android:max:进度条的最大值
> - android:progress:进度条已完成进度值
> - android:progressDrawable:设置轨道对应的Drawable对象
> - android:indeterminate:如果设置成true,则进度条不精确显示进度
> - android:indeterminateDrawable:设置不显示进度的进度条的Drawable对象
> - android:indeterminateDuration:设置不精确显示进度的持续时间
> - android:secondaryProgress:二级进度条,类似于视频播放的一条是当前播放进度,一条是缓冲进度,前者通过progress属性进行设置!
- 对应的再Java中我们可调用下述方法:
> - getMax():返回这个进度条的范围的上限
> - getProgress():返回进度
> - getSecondaryProgress():返回次要进度
> - incrementProgressBy(int diff):指定增加的进度
> - isIndeterminate():指示进度条是否在不确定模式下
> - setIndeterminate(boolean indeterminate):设置不确定模式下
- 系统默认进度条使用实例:
![](http://7xohph.com1.z0.glb.clouddn.com/34906854.jpg)
### 耀眼的IOS的ProgressBar ,参看[开源中国IOS代码库](http://www.oschina.net/ios/codingList/373/ios-progress)
### 圆形进度条
> 网上一个简单的自定义圆形进度条!代码还是比较简单,容易理解,有兴趣可以看看,或者进行相关扩展~
![](http://7xohph.com1.z0.glb.clouddn.com/17272953.jpg)
- 实现代码:自定义View类:
```java
/**
* Created by Jay on 2015/8/5 0005.
*/
public class CirclePgBar extends View {
private Paint mBackPaint;
private Paint mFrontPaint;
private Paint mTextPaint;
private float mStrokeWidth = 50;
private float mHalfStrokeWidth = mStrokeWidth / 2;
private float mRadius = 200;
private RectF mRect;
private int mProgress = 0;
//目标值,想改多少就改多少
private int mTargetProgress = 90;
private int mMax = 100;
private int mWidth;
private int mHeight;
public CirclePgBar(Context context) {
super(context);
init();
}
public CirclePgBar(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CirclePgBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//完成相关参数初始化
private void init() {
mBackPaint = new Paint();
mBackPaint.setColor(Color.WHITE);
mBackPaint.setAntiAlias(true);
mBackPaint.setStyle(Paint.Style.STROKE);
mBackPaint.setStrokeWidth(mStrokeWidth);
mFrontPaint = new Paint();
mFrontPaint.setColor(Color.GREEN);
mFrontPaint.setAntiAlias(true);
mFrontPaint.setStyle(Paint.Style.STROKE);
mFrontPaint.setStrokeWidth(mStrokeWidth);
mTextPaint = new Paint();
mTextPaint.setColor(Color.GREEN);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(80);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
//重写测量大小的onMeasure方法和绘制View的核心方法onDraw()
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getRealSize(widthMeasureSpec);
mHeight = getRealSize(heightMeasureSpec);
setMeasuredDimension(mWidth, mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
initRect();
float angle = mProgress / (float) mMax * 360;
canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight / 2 + mHalfStrokeWidth, mTextPaint);
if (mProgress < mTargetProgress) {
mProgress += 1;
invalidate();
}
}
public int getRealSize(int measureSpec) {
int result = 1;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
//自己计算
result = (int) (mRadius * 2 + mStrokeWidth);
} else {
result = size;
}
return result;
}
private void initRect() {
if (mRect == null) {
mRect = new RectF();
int viewSize = (int) (mRadius * 2);
int left = (mWidth - viewSize) / 2;
int top = (mHeight - viewSize) / 2;
int right = left + viewSize;
int bottom = top + viewSize;
mRect.set(left, top, right, bottom);
}
}
}
- 然后在布局文件中加上:
<com.jay.progressbardemo.CirclePgBar
android:layout_width="match_parent"
android:layout_height="match_parent"/>
总结
- progressbar是Android中的常用控件,在实际开发中和动画结合较多,好的进度条可以缓解使用者焦躁的情趣,自定义圆形进度条可以自行完善,然后用到实际开发中!
layer-list实现阴影效果——xpleemoon
为控件实现阴影效果,可以有多种方式:
- 多个drawable层叠在一起(不好的实现是多个View层叠达到多个drawable的层叠效果,相对好的实现是在同一个View钟实现多个drawable的层叠)
- 自定义view
- Material Design中设置Z轴的方式
本文的思路是多个drawable叠在一起,但是不额外使用View,通过layer-list可以将多个item按照顺序层叠在一起显示。首先来看效果图:
第一个和第二个控件是用来展示layer-list实现阴影效果的基本款,而第三个控件是综合上述两个控件效果,再集合selector实现的。
默认状态:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 阴影:左偏移2dp,上偏移4dp -->
<item
android:left="2dp"
android:top="4dp">
<shape>
<solid android:color="@android:color/holo_blue_dark" />
<corners android:radius="10dp" />
</shape>
</item>
<!-- 前景::底偏移4dp,右偏移2dp -->
<item
android:bottom="4dp"
android:right="2dp">
<shape>
<solid android:color="@android:color/holo_blue_bright" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
- 点击状态:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 为了达到点击的真实感,将原来默认状态的前景色设置为阴影,并将前景设为无透明-->
<item
android:left="2dp"
android:top="4dp">
<shape>
<solid android:color="@android:color/holo_blue_bright" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="4dp"
android:right="2dp">
<shape>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
layer-list的item可以通过以下属性设置偏移量:
- android:top 顶部的偏移量
- android:bottom 底部的偏移量
- android:left 左边的偏移量
- android:right 右边的偏移量
- selector,使用上述layer-list:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/layer_list_btn_pressed" android:state_pressed="true" />
<item android:drawable="@drawable/layer_list_btn_pressed" android:state_selected="true" />
<item android:drawable="@drawable/layer_list_btn" />
</selector>
- 最后再来看下,布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@drawable/layer_list_btn"
android:clickable="true"
android:gravity="center"
android:text="默认状态" />
<TextView
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:background="@drawable/layer_list_btn_pressed"
android:clickable="true"
android:gravity="center"
android:text="点击状态" />
<TextView
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:background="@drawable/selector_btn"
android:clickable="true"
android:gravity="center"
android:text="点我" />
</LinearLayout>
第一个和第二个TextView分别引用了对应的layer-list(默认和点击)作为背景,第三个引用了selector
零部署的云服务 - 王胜
本周的分享主题是动画,但之前7月份我已经分享过一次,知其所以然 。再加上前面几位已经对android的动画介绍的很完整了,所以我就分享另一个话题『云平台下的零部署开发网站』。
牵扯的技能
- Git
- 任何一门后端开发语言
搭建步骤
AZURE -> 点击 Web应用模块 -> 选择语言,点击创建Web应用 -> 选择模板,点击创建,至此,应用以创建,点击页面上站点url,就能看到新创建的Web站点了。
修改代码,Git提交自动完成部署
复制创建成功页面『使用 Git 克隆或推送』里的Git地址,将初始化源码clone到本地,然后编辑代码,修改功能。完成后,直接push到远程,云平台自动完成部署。再看看网页是不是已经发生变化了。
Victors-MPB:azure wangsheng$ git clone https://$4f743e5d-0ee0-4-231-b9ee:WSc8Szx4Rf30apo3Ky7hpw6mXAadAZYvn1zagCvMaboj7mHFyJ2vzuYn9i12@4f743e5d-0ee0-4-231-b9ee.scm.azurewebsites.net/4f743e5d-0ee0-4-231-b9ee.git
Cloning into '4f743e5d-0ee0-4-231-b9ee'...
remote: Counting objects: 4, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 4 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (4/4), done.
Checking connectivity... done.
Victors-MPB:azure wangsheng$ ls
4f743e5d-0ee0-4-231-b9ee
Victors-MPB:azure wangsheng$ cd 4f743e5d-0ee0-4-231-b9ee/
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ git br
* master
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ git log
commit cf6edda65210ef7254f9bc545c778489f123620e
Author: windowsazure <windowsazure>
Date: Fri Nov 20 03:53:00 2015 +0000
Initial Commit
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ ls
favicon.ico index.php
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ vi index.php
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ git st
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: index.php
no changes added to commit (use "git add" and/or "git commit -a")
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ git diff
diff --git a/index.php b/index.php
<?php
index 712f825..50a17e7 100644
--- a/index.php
+++ b/index.php
@@ -1,3 +1,4 @@
<?php
echo "Hello World"
-?>
\ No newline at end of file
+ echo "hack it."
+?>
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ git ci -am "add one line."
[master 6c5551f] add one line.
1 file changed, 2 insertions(+), 1 deletion(-)
Victors-MPB:4f743e5d-0ee0-4-231-b9ee wangsheng$ git push origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 324 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '6c5551f090'.
remote: Generating deployment script.
remote: Generating deployment script for Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling Basic Web Site deployment.
remote: Finished successfully.
remote: Deployment successful.
对,后端开发可以如此简单快乐地开发部署!!!
Comments