Android 5.0學習之動畫

前言

使用者跟你的App進行互動時，Material Design中的動畫給予使用者動作的反饋和提供視覺的一致感。

包括之前我學習過的：

除我們已經學習過的動畫之外，Material Design還給我們提供了什麼動畫？

Touch feedback（觸控反饋）Reveal effect（揭露效果）Curved motion（曲線運動）View state changes （檢視狀態改變）Touch feedback（觸控反饋）

當用戶與使用者介面進行互動時，materialdesign中的觸控反饋在觸控點上提供了一種瞬時視覺確認。按鈕的預設觸控反饋動畫使用新的RippleDrawable

類，它使用漣漪(波紋)效應在不同狀態間轉換。

在大多數情況下，你應該在你的佈局XML檔案中使用如下的方法去指定檢視的背景：

?android:attr/selectableItemBackground (有界波紋)

?android:attr/selectableItemBackgroundBorderless (無界波紋)

注意：selectableItemBackgroundBorderless是API級別21上的新屬性。

效果如下：

layout：

[html] view plain copy print ?

<Buttonandroid:layout_width=

"100dp"android:layout_height="100dp"
android:background="?android:attr/selectableItemBackground"
android:text="有界"
android:textColor="@android:color/white"
android:colorControlHighlight="@android:color/holo_red_dark"/>
<Buttonandroid:layout_width

="100dp"android:layout_height="100dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:textColor="@android:color/white"
android:text="無界"/>

或者，你可以定義一個RippleDrawable作為波紋元素的XML資源

[html] view plain copy print ?

<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/accent_dark">
<item>
<shape
android:shape="oval">
<solidandroid:color="?android:colorAccent"/>
</shape>
</item>
</ripple>

你可以給RippleDrawable物件指定一種顏色。要更改預設的觸控反饋顏色，使用主題的android:colorControlHighlight屬性。

Reveal effect（揭示效果）

[java] view plain copy print ?

public Animator createAnimation(View v, Boolean isFirst) {
Animator animator;
if (isFirst) {
animator = ViewAnimationUtils.createCircularReveal(
v,// 操作的檢視
0,// 動畫開始的中心點X
0,// 動畫開始的中心點Y
v.getWidth(),// 動畫開始半徑
0);// 動畫結束半徑
} else {
animator = ViewAnimationUtils.createCircularReveal(
v,// 操作的檢視
0,// 動畫開始的中心點X
0,// 動畫開始的中心點Y
0,// 動畫開始半徑
v.getWidth());// 動畫結束半徑
}
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(500);
return animator;
}
staticboolean isFirst = false;
@Override
publicvoid onClick(View v) {
createAnimation(myView, isFirst).start();
isFirst = !isFirst;
}

Curved motion（曲線運動）

Material design中的動畫依靠曲線，這個曲線適用於時間插值器和控制元件運動模式。

類是一個基於貝塞爾曲線(Bézier curve)或路徑(Path)物件上的新的插值器。

在materialdesign規範中，系統提供了三個基本的曲線：

@interpolator/fast_out_linear_in.xml

@interpolator/fast_out_slow_in.xml

@interpolator/linear_out_slow_in.xml

類有了新的構造方法，使你能夠一次能同時使用兩個或多個屬性去繪製動畫的路徑。例如，下面的動畫使用一個Path物件進行檢視X和Y屬性的動畫繪製：

[java] view plain copy print ?

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

在Android 5.0 提供的API Demos -》Animation/Path Animations 就有一個例子使用了曲線動畫：

Path Animations 原始碼：

[java] view plain copy print ?

/*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.example.android.apis.animation;
import android.animation.ObjectAnimator;
import android.animation.TypeConverter;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PointF;
import android.graphics.RectF;
import android.os.Bundle;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.util.Log;
import android.util.Property;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.widget.FrameLayout;
import android.widget.RadioGroup;
import com.example.android.apis.R;
/** This application demonstrates the use of Path animation. */
publicclass PathAnimations extends Activity implements
RadioGroup.OnCheckedChangeListener, View.OnLayoutChangeListener {
finalstatic Path sTraversalPath = new Path();
finalstaticfloat TRAVERSE_PATH_SIZE = 7.0f;
finalstatic Property<PathAnimations, Point> POINT_PROPERTY
= new Property<PathAnimations, Point>(Point.class, "point") {
@Override
public Point get(PathAnimations object) {
View v = object.findViewById(R.id.moved_item);
returnnew Point(Math.round(v.getX()), Math.round(v.getY()));
}
@Override
publicvoid set(PathAnimations object, Point value) {
object.setCoordinates(value.x, value.y);
}
};
static {
float inverse_sqrt8 = FloatMath.sqrt(0.125f);
RectF bounds = new RectF(1, 1, 3, 3);
sTraversalPath.addArc(bounds, 45, 180);
sTraversalPath.addArc(bounds, 225, 180);
bounds.set(1.5f + inverse_sqrt8, 1.5f + inverse_sqrt8, 2.5f + inverse_sqrt8,
2.5f + inverse_sqrt8);
sTraversalPath.addArc(bounds, 45, 180);
sTraversalPath.addArc(bounds, 225, 180);
bounds.set(4, 1, 6, 3);
sTraversalPath.addArc(bounds, 135, -180);
sTraversalPath.addArc(bounds, -45, -180);
bounds.set(4.5f - inverse_sqrt8, 1.5f + inverse_sqrt8, 5.5f - inverse_sqrt8, 2.5f + inverse_sqrt8);
sTraversalPath.addArc(bounds, 135, -180);
sTraversalPath.addArc(bounds, -45, -180);
sTraversalPath.addCircle(3.5f, 3.5f, 0.5f, Path.Direction.CCW);
sTraversalPath.addArc(new RectF(1, 2, 6, 6), 0, 180);
}
private CanvasView mCanvasView;
private ObjectAnimator mAnimator;
/** Called when the activity is first created. */
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.path_animations);
mCanvasView = (CanvasView) findViewById(R.id.canvas);
mCanvasView.addOnLayoutChangeListener(this);
((RadioGroup) findViewById(R.id.path_animation_type)).setOnCheckedChangeListener(this);
}
publicvoid setCoordinates(int x, int y) {
changeCoordinates((float) x, (float) y);
}
publicvoid changeCoordinates(float x, float y) {
View v = findViewById(R.id.moved_item);
v.setX(x);
v.setY(y);
}
publicvoid setPoint(PointF point) {
changeCoordinates(point.x, point.y);
}
@Override
publicvoid onCheckedChanged(RadioGroup group, int checkedId) {
startAnimator(checkedId);
}
@Override
publicvoid onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft,
int oldTop, int oldRight, int oldBottom) {
int checkedId = ((RadioGroup)findViewById(R.id.path_animation_type)).getCheckedRadioButtonId();
if (checkedId != RadioGroup.NO_ID) {
startAnimator(checkedId);
}
}
privatevoid startAnimator(int checkedId) {
if (mAnimator != null) {
mAnimator.cancel();
mAnimator = null;
}
View view = findViewById(R.id.moved_item);
Path path = mCanvasView.getPath();
if (path.isEmpty()) {
return;
}
switch (checkedId) {
case R.id.named_components:
// Use the named "x" and "y" properties for individual (x, y)
// coordinates of the Path and set them on the view object.
// The setX(float) and setY(float) methods are called on view.
// An int version of this method also exists for animating
// int Properties.
mAnimator = ObjectAnimator.ofFloat(view, "x", "y", path);
break;
case R.id.property_components:
// Use two Properties for individual (x, y) coordinates of the Path
// and set them on the view object.
// An int version of this method also exists for animating
// int Properties.
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
break;
case R.id.multi_int:
// Use a multi-int setter to animate along a Path. The method
// setCoordinates(int x, int y) is called on this during the animation.
// Either "setCoordinates" or "coordinates" are acceptable parameters
// because the "set" can be implied.
mAnimator = ObjectAnimator.ofMultiInt(this, "setCoordinates", path);
break;
case R.id.multi_float:
// Use a multi-float setter to animate along a Path. The method
// changeCoordinates(float x, float y) is called on this during the animation.
mAnimator = ObjectAnimator.ofMultiFloat(this, "changeCoordinates", path);
break;
case R.id.named_setter:
// Use the named "point" property to animate along the Path.
// There must be a method setPoint(PointF) on the animated object.
// Because setPoint takes a PointF parameter, no TypeConverter is necessary.
// In this case, the animated object is PathAnimations.
mAnimator = ObjectAnimator.ofObject(this, "point", null, path);
break;
case R.id.property_setter:
// Use the POINT_PROPERTY property to animate along the Path.
// POINT_PROPERTY takes a Point, not a PointF, so the TypeConverter
// PointFToPointConverter is necessary.
mAnimator = ObjectAnimator.ofObject(this, POINT_PROPERTY,
new PointFToPointConverter(), path);
break;
}
mAnimator.setDuration(10000);
mAnimator.setRepeatMode(Animation.RESTART);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.start();
}
publicstaticclass CanvasView extends FrameLayout {
Path mPath = new Path();
Paint mPathPaint = new Paint();
public CanvasView(Context context) {
super(context);
init();
}
public CanvasView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CanvasView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
privatevoid init() {
setWillNotDraw(false);
mPathPaint.setColor(0xFFFF0000);
mPathPaint.setStrokeWidth(2.0f);
mPathPaint.setStyle(Paint.Style.STROKE);
}
@Override
protectedvoid onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (changed) {
Matrix scale = new Matrix();
float scaleWidth = (right-left)/TRAVERSE_PATH_SIZE;
float scaleHeight= (bottom-top)/TRAVERSE_PATH_SIZE;
scale.setScale(scaleWidth, scaleHeight);
sTraversalPath.transform(scale, mPath);
}
}
public Path getPath() {
return mPath;
}
@Override
publicvoid draw(Canvas canvas) {
canvas.drawPath(mPath, mPathPaint);
super.draw(canvas);
}
}
privatestaticclass PointFToPointConverter extends TypeConverter<PointF, Point> {
Point mPoint = new Point();
public PointFToPointConverter() {
super(PointF.class, Point.class);
}
@Override
public Point convert(PointF value) {
mPoint.set(Math.round(value.x), Math.round(value.y));
return mPoint;
}
}
}

layout： [html] view plain copy print ?

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollViewandroid:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioGroupandroid:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/path_animation_type"
>
<RadioButtonandroid:id="@+id/named_components"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Named Components"/>
<RadioButtonandroid:id="@+id/property_components"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Property Components"/>
<RadioButtonandroid:id="@+id/multi_int"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Multi-int"/>
<RadioButtonandroid:id="@+id/multi_float"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Multi-float"/>
<RadioButtonandroid:id="@+id/named_setter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Named Property"/>
<RadioButtonandroid:id="@+id/property_setter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Property"/>
</RadioGroup>
</ScrollView>
<viewclass="com.example.android.apis.animation.PathAnimations$CanvasView"
android:id="@+id/canvas"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
<ImageViewandroid:id="@+id/moved_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/frog"/>
</view>
</LinearLayout>

View state changes（檢視狀態改變）

使用步驟

[html] view plain copy print ?

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_pressed="true">
<set>
<objectAnimatorandroid:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="10"
android:valueType="floatType"/>
<objectAnimatorandroid:propertyName="rotationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="360"
android:valueType="floatType"/>
</set>
</item>
<item
android:state_pressed="false"
>
<set>
<objectAnimatorandroid:propertyName="translationZ"
android:duration="10000"
android:valueTo="0"
android:valueType="floatType"/>
<objectAnimatorandroid:propertyName="rotationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</item>
</selector>

定義了翻轉的效果的xml,

配置兩種方式：

1.layout：android:stateListAnimator屬性將其分配給你的檢視,

效果如下：

當然動畫任你自己定義，如果只定義Z軸的話也可以輕鬆的實現此效果：

類讓你去建立drawable資源，該資源在相關聯的檢視的狀態更改時展示動畫。一些Android5.0中的系統控制元件使用這些預設的動畫。下面的例子顯示瞭如何定義一個作為XML資源：

[html] view plain copy print ?

<animated-selector
xmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@+id/pressed"android:drawable="@drawable/drawableP"
android:state_pressed="true"/>
<

相關推薦

Android 5.0學習之動畫

前言使用者跟你的App進行互動時，Material Design中的動畫給予使用者動作的反饋和提供視覺的一致感。包括之前我學習過的：除我們已經學習過的動畫之外，Material Design還給我們提供了什麼動畫？ Touch feedback（觸控反饋）Rev

Android 5.0學習之Activity過渡動畫

前言 Activity Transition：提供了三種Transition型別：進入：一個進入的過渡(動畫)決定activity中的所有的檢視怎麼進入螢幕。退出：一個退出的過渡(動畫)決定一個activity中的所有檢視怎麼退出螢幕。共享元素：一個共享元素

Android 5.0學習之Activity共享元素過渡動畫

轉自：http://blog.csdn.net/ljx19900116/article/details/41806889 前言 Activity Transition：提供了三種Transition型別：進入：一個進入的過渡(動畫)決定activity中的

Android 5.0+高級動畫開發矢量圖動畫軌跡動畫路徑變換

Android 第1章課程介紹為了成就更多高逼格的人才，我專門整理了Android5.0以後主推的實現酷炫動畫的新技術，教你掌握實現動畫的高逼格技巧。課程中我會詳細講解每個動畫效果實現的原理和所用的技術，並帶你一步一步的實現每個動畫效果，讓你在學完本次課程後，能夠舉一反三，再也不必擔心設計MM的設計你沒法實

Android學習之Android 5.0分享動畫實現微信點選全屏效果

Android5.0過渡動畫，請看今天用分享動畫實現微信點選全屏效果本文原始碼下載地址 peizhi 配置 build.gradle： compile 'com.android.support:recyclerview-v7:23.

Android學習之動畫總結（一）

寫在前面：本文是根據hencoder提供的教程寫的總結。HenCoder https://hencoder.com。 Android裡動畫可以分為兩類：Animation和Transition，其中Animation又可以分為View Animation和Pr

Android學習之動畫總結（二）

寫在前面：本文是根據hencoder提供的教程寫的總結。HenCoder https://hencoder.com。關於ObjectAnimator可以用ofInt（）來做整數的屬性動畫和ofFloat（）來做小數的屬性動畫。當需要對其他型別的屬性來做動畫就需要

Android實戰技巧之九：最新Android開發環境（Eclipse+ADT+Android 5.0）

一、一切由執行時錯誤引起dalvikvm Could not find class '引用包.類', referenced from method... 其實在編譯時也會見到如下錯誤： [dx] [dx] trouble processing:

Android開發者福利之--------Android 5.0 API

Android 5.0 API Android 5.0 (LOLLIPOP) 為使用者和應用開發者提供了新功能。本文旨在介紹其中最值得關注的新 API。如果您有已釋出的應用，請務必看一看 Android 5.0 行為變更，瞭解您的應用應該考慮的變化。即使您不使用

Android 5.0 之後動畫摘要

1 Android 5.0 轉場動畫 21+ 首要工作：在RES檔案下建立transition檔案，在該資料夾下定義介面轉場動畫和共享元素的動畫。在你的style中設定

android 5.0之cardview

CardView提供了一個預設的elevation（以為CardView的Z軸陰影）和圓角角度首先我們需要在res/values/attrs中定義屬性 <?xml version="1.0" encoding="utf-8"?> <resources&

React Native之Android 5.0以下系統WebView訪問https頁面變成空白頁

在我們的React Native專案中，需要開發一個tab頁面專門配置三方h5連結，供使用者瀏覽。自動化測試：Android 5.0以下系統此tab頁面為空白頁面。看效果：而我們去檢視這個三方的

Android 5.0核心和原始碼學習（3）——SystemServer啟動了什麼服務？

/**入口 * The main entry point from zygote. */ public static void main(String[] args) { new SystemServer().run(); } /**

swift2.0學習之拓展

swift 方法 post var nes while code 算法 ive 拓展：和oc的拓展方法功能差點兒相同。就是給已經存在的類，結構體。枚舉，協議類型添加新的方法拓展語法：用extensionkeyword聲明： extension SomeTyp

Python自動化3.0-------學習之路-------第一個程序用戶登錄！

hide lap 標記之路判斷 () exit isp 互信一、用戶登錄程序知識點：1.input（） 2.while 循環 3.fot 循環

Python自動化3.0-------學習之路-------模塊初識！

div 函數傳遞情況必須 sys 先來存在 argv 模塊初識　　 Python的強大之處在於他有非常豐富和強大的標準庫和第三方庫，幾乎你想實現的任何功能都有相應的Python庫支持，以後的課程中會深入講解常用到的各種庫，現在，我們先來象征性的學2個簡單的

Python自動化3.0-------學習之路------日期和時間！

unix dst python自動化相關 http -a 年份字符串 cti Python 日期和時間 Python 程序能用很多方式處理日期和時間，轉換日期格式是一個常見的功能。 Python 提供了一個 time 和 calendar 模塊可以用於格式化日期和時間。

Python自動化3.0-------學習之路-------函數！

rgs 未命名 ack 結果 string 提示 mutable tab 外部 Python 函數函數是組織好的，可重復使用的，用來實現單一，或相關聯功能的代碼段。函數能提高應用的模塊性，和代碼的重復利用率。你已經知道Python提供了許多內建函數，比如print()。

Enterprise Library 5.0 學習筆記

數據 dsm tar ng- one pop releases 緩存最新版近期了解了微軟提供的企業開發框架Enterprise Library，眼下最新版本號是6.0，可是不支持FW3.5。所以就學習了5.0的版本號，EL5.0支持FW3.5和4

修復android 5.0 Xutils的框架問題retry error, curr request is null

top ims 訂閱 height trac ber request ext key Android 5.0手機對xUtils-2.6.13.jar請求時會出現retry error, curr request is null 情況，修復解決方式:

Android 5.0學習之動畫

相關推薦