(点击
上方公众号
，可快速关注)
来源：伯乐在线 - Spike
http://android.jobbole.com/82884/
如有好文章投稿，请点击 → 这里了解详情
在Android设计中, 经常会使用
卡片元素
, 正面显示图片或主要信息, 背面显示详细内容, 如
网易有道词典的单词翻转
和
海底捞的食谱展示
. 实现卡片视图非常容易, 那么如何实现翻转动画呢?
在TB吃海底捞时, 使用Pad点餐, 发现应用的食谱功能使用卡片控件, 就准备和大家分享一下实现方式. 有兴趣的朋友可以去海底捞看看:)
本文源码的GitH
ub下载地址
https://github.com/SpikeKing/wcl-flip-anim-demo
欢迎Follow我的GitHub:
https://github.com/SpikeKing
首页
首页由正面和背面两张卡片组成, 同时, 设置点击事件flipCard.
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
android
:
id
=
"@+id/main
_fl_container"
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
:
onClick
=
"flipCard"
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
=
"me.chunyu.spike.wcl_flip_anim_demo.MainActivity"
>
layout
=
"@layout/cell_card_back"
/>
layout
=
"@layout/cell_card_front"
/>
逻辑, 初始化动画和镜头距离.
@Override
protected
void
onCreate
(
Bundle
savedInstanceState
)
{
super
.
onCreate
(
savedInstanceState
);
setContentView
(
R
.
layout
.
activity_main
);
ButterKnife
.
bind
(
this
);
setAnimators
();
// 设置动画
setCameraDistance
();
// 设置镜头距离
}
动画
初始化
右出(RightOut)
和
左入(LeftIn)
动画, 使用动画集合AnimatorSet.
当右出动画开始时, 点击事件无效, 当左入动画结束时, 点击事件恢复.
// 设置动画
private
void
setAnimators
()
{
mRightOutSet
=
(
AnimatorSet
)
AnimatorInflater
.
loadAnimator
(
this
,
R
.
animator
.
anim_out
);
mLeftInSet
=
(
AnimatorSet
)
AnimatorInflater
.
loadAnimator
(
this
,
R
.
animator
.
anim_in
);
// 设置点击事件
mRightOutSet
.
addListener
(
new
AnimatorListenerAdapter
()
{
@Override
public
void
onAnimationStart
(
Animator
animation
)
{
super
.
onAnimationStart
(
animation
);
mFlContainer
.
setClickable
(
false
);
}
});
mLeftInSet
.
addListener
(
new
AnimatorListenerAdapter
()
{
@Override
public
void
onAnimationEnd
(
Animator
animation
)
{
super
.
onAnimationEnd
(
animation
);
mFlContainer
.
setClickable
(
true
);
}
});
}
右出动画
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
set
xmlns
:
android
=
"http://schemas.android.com/apk/res/android"
>
objectAnimator
android
:
duration
=
"@integer/anim_length"
android
:
propertyName
=
"rotationY"
