# Motionlayout4Share
**Repository Path**: cupster/motionlayout4share
## Basic Information
- **Project Name**: Motionlayout4Share
- **Description**: 使用motionlayout做动画，适合多view的组合动画
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-11
- **Last Updated**: 2022-09-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 1.概览
### 实践案例预览
文末有案例代码，或[Gitee直达](https://gitee.com/cupster/motionlayout4share)
0.头像轮播效果
1.收藏动画效果
2.送礼物效果
3.弹幕效果
4.跑马灯效果
![4.gif]()
5.公告、通知
![5.gif]()
6.Switch开关
doing...
# 2.属性含义
### 1.基础属性
1. Transition表示动画的过渡
2. constraintSetStart的值是开始的状态对应的id，表示从那个id对应的状态开始动画；
3. constraintSetEnd的值是结束的状态对应的id，表示过渡到那个id对应的状态；
4. duration表示的事动画的时长，单位是毫秒
子标签
5. OnClick 表示是点击触发。
6. targetId表示点击对应的View触发。
7. ConstraintSet表示约束数组，里面是一系列的View的约束值。代表的是动画的一个状态。
8. KeyFrameSet表示的是关键帧的数组，设置的是动画中的某个关键帧的值。
### 2.OnClick设置
默认的motion:clickAction是toggle，即来回切换。它有5个值：
* toggle：来回切换
* jumpToStart：瞬间跳转到start状态，没有动画
* jumpToEnd：瞬间跳转到end状态，没有动画
* transitionToStart：动画过渡到start状态
* transitionToEnd：动画过渡到end状态
如果设置为transitionToEnd，这样点击的效果就是：如果当前是start状态，会过渡到end状态，如果当前是end状态，点击没有效果。
设置方法：点击OnClick后面的加号(+) -> 设置tools:clickAction的值为transitionToEnd。
### 3.设置弧线运动。
设置方法为给start状态的imageButton添加motion:pathMotionArc属性。它有几个常用的值：
* startHorizontal：运动的前部分时间水平方向会移动更多的比例
* startVertical：运动的前部分时间竖直方向会移动更多的比例
* none：直线运动
# 3.其他属性设置动画
ConstraintSet能修改ConstraintLayout属性这个是很显然的，包括位置大小等。
主要但不限于：
* alpha
* visibility
* elevation
* rotation
* rotationX
* rotationY
* translationX
* translationY
* translationZ
* scaleX
* scaleY
这些属性是可以同时设置动画的，譬如我们想位置移动的时候还进行旋转270度，然后透明度逐渐变为0。
设置方法：end状态的imageButton添加alpha属性和rotation属性
# 4.其他属性
MotionLayout还有其他一些属性，可以帮助开发中方便查看动画的信息。
* app:showPaths：显示动画的轨迹
* app:motionProgress：设置动画进度的某个关键点
* app:motionDebug：显示动画的信息
---
* transitionEasing 改变变化速率。
* ---Standard easing 慢-快-慢
* ---Accelerate easing 慢-快-快
* ---Decelerate easing 快-慢-慢
# 5.图片变换
MotionLayout提供了可以对显示的图片进行动画切换的类ImageFilterView和ImageFilterButton
* ImageFilterView设置srcCompat和altSrc, 他们分别代表开始显示的第一张图片和第二张图片。
* 显示第1张图片时自定义属性crossfade设置为0， 显示第2张图片时自定义属性crossfade设置为1.
ImageFilterView还提供了其他一些自定义属性可以进行操作：
* warmth:
* saturation 变黑白
* contrast
* round
* roundPercent
# 6.关键帧 Keyframes
Motionlayout动画的灵魂。为什么这么说呢？因为我们前面的内容只是定义了开始状态和结束状态，中间状态的修改就需要关键帧来实现了。
### 1.位置关键帧 Position Keyframes
```xml
...
//x,y的坐标系是相对于起始点位置，起点的坐标为(0, 0),终点的位置为(1, 1)。x为水平方向，y为垂直方向。
//x,y的坐标是相对父容器，值是从0.0-1.0
//起点和终点的连线方向是X轴，的坐标是(0, 0)，终点的坐标是(1.0, 0)，然后和X轴垂直的方向为Y轴。
```
### 2.属性关键帧 Attribute Keyframes
```xml
//属性关键帧
```
### 3.KeyTrigger 关键触发关键帧
```xml
...
```
# 7.代码操作
### 1.启动动画和监听动画
```java
motionLayout.setTransitionDuration(3000)
motionLayout.transitionToState(R.id.end)
```
### 2.监听动画的进程
```java
motionLayout.setTransitionListener(
object: MotionLayout.TransitionListener {
override fun onTransitionTrigger(motionLayout: MotionLayout?,
triggerId: Int, positive: Boolean, progress: Float) {
// Called when a trigger keyframe threshold is crossed
}
override fun onTransitionStarted(motionLayout: MotionLayout?,
startId: Int, endId: Int) {
// Called when the transition starts
}
override fun onTransitionChange(motionLayout: MotionLayout?,
startId: Int, endId: Int, progress: Float) {
// Called each time a property changes. Track progress value to find
// current position
}
override fun onTransitionCompleted(motionLayout: MotionLayout?,
currentId: Int) {
// Called when the transition is complete
}
}
)
```
# 8.实践案例
[代码直达:Gitee](https://gitee.com/cupster/motionlayout4share)
1.收藏/取消收藏效果
2.弹幕效果
3.公告效果
4.跑马灯效果
5.送礼物example
6.Switch开关