View实现3D效果
上次有文章介绍了利用传感器实现3D效果，根据加速度和重力传感器，计算xy偏移值，然后在移动view。
1. 利用MotionLayout实现
最开始想到的是用motionlayout也可以同样实现，但是最后发现我错了，motionlayout设置的view路径是固定的，无法在xy轴上自由移动。
一个简单的效果：
2. 封装View
利用自定义ViewGroup实现，直接在布局中引用就行了
主要代码
传感器初始化：
//获取传感器XYZ值
private var mAcceleValues : FloatArray ?= null
private var mMageneticValues : FloatArray ?= null
private val listener = object : SensorEventListener {
override fun onSensorChanged(event: SensorEvent?) {
if (event?.sensor?.type == Sensor.TYPE_ACCELEROMETER) {
mAcceleValues = event.values
//log("x:${event.values[0]},y:${event.values[1]},z:${event.values[2]}")
}
if (event?.sensor?.type == Sensor.TYPE_MAGNETIC_FIELD) {
mMageneticValues = event.values
}
if (mAcceleValues==null || mMageneticValues==null) return
val values = FloatArray(3)
val R = FloatArray(9)
SensorManager.getRotationMatrix(R, null, mAcceleValues, mMageneticValues);
SensorManager.getOrientation(R, values);
//val z = values[0].toDouble()
// x轴的偏转角度
//val x = Math.toDegrees(values[1].toDouble()).toFloat()
// y轴的偏转角度
//val y = Math.toDegrees(values[2].toDouble()).toFloat()
val degreeZ = Math.toDegrees(values[0].toDouble()).toInt()
val degreeX = Math.toDegrees(values[1].toDouble()).toInt()
val degreeY = Math.toDegrees(values[2].toDouble()).toInt()
log("x:${degreeX},y:${degreeY},z:${degreeZ}")
calculateScroll(degreeX, degreeY, degreeZ)
}
override fun onAccuracyChanged(sensor: Sensor?, accuracy: Int) {
}
}
//传感器初始化
private var hasInit = false
private fun initSensor(){
if (hasInit) return
log("initSensor")
val sensorManager = context.getSystemService(Context.SENSOR_SERVICE) as SensorManager
// 重力传感器
val acceleSensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER)
sensorManager.registerListener(listener, acceleSensor, SensorManager.SENSOR_DELAY_GAME)
// 地磁场传感器
val magneticSensor = sensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD)
sensorManager.registerListener(listener, magneticSensor, SensorManager.SENSOR_DELAY_GAME)
hasInit = true
}
计算移动距离：
private fun calculateScroll(x: Int, y: Int, z: Int) {
var deltaY = 0
var deltaX = 0
//除去一下特殊的角度
//if (abs(x)==180 || abs(x)==90 || abs(y)==180 || abs(y)==90) return
//if (x !in -90 until 45) return
if (abs(z) > 90){
if (y in -180 until 0){
//从右向左旋转
//x值增加
deltaX = abs(((y / 180.0) * slideDistance).toInt())
}else if (y in 0 until 180){
//从左向右旋转
deltaX = -abs(((y / 180.0) * slideDistance).toInt())
}
}
if (x in -90 until 0){
deltaY = abs((((x) / 180.0) * slideDistance).toInt())
}else if (x in 0 until 90){
deltaY = -abs((((x) / 180.0) * slideDistance).toInt())
}
if (abs(deltaX) < 5) deltaX=0
if (abs(deltaY) < 5) deltaY=0
log("onSensorChanged,scrollX:${deltaX},scrollY:${deltaY},x:${x} y:${y}")
}
滑动：
scroller.startScroll(deltaX,deltaY, (this.x+deltaX).toInt(),(this.y+deltaY).toInt(),1000)
override fun computeScroll() {
super.computeScroll()
//判断Scroller是否执行完毕
if (scroller.computeScrollOffset()) {
val slideX = scroller.currX
val slideY = scroller.currY
val bottomSlideX = slideX/3
val bottomSlideY = slideY/3
val middleSlideX = slideX/2
val middleSlideY = slideY/2
val topSlideX = -slideX
val topSlideY = -slideY
bottomImageView?.layout(0+bottomSlideX,0+bottomSlideY,measuredWidth+bottomSlideX,measuredHeight+bottomSlideY)
//middleImageView?.layout(middleLeft+middleSlideX,middleTop+middleSlideY,middleRight+middleSlideX,middleBottom+middleSlideY)
topImageView?.layout(topLeft+topSlideX,topTop+topSlideY,topRight+topSlideX,topBottom+topSlideY)
/*(bottomImageView as View).scrollTo(
scroller.currX,
scroller.currY
)*/
//通过重绘来不断调用computeScroll
invalidate()
}
}
属性配置：
<declare-styleable name="layout3d">
<!--上中下层资源文件-->
<attr name="TopLayer" format="reference" />
<attr name="MiddleLayer" format="reference" />
<attr name="BottomLayer" format="reference" />
<!--上中下层滑动距离-->
<attr name="SlideDistance" format="dimension"/>
<!--上中下层是否滑动-->
<attr name="TopSlidingEnable" format="boolean"/>
<attr name="MiddleSlidingEnable" format="boolean"/>
<attr name="BottomSlidingEnable" format="boolean"/>
<!--中层图片资源坐标设置-->
<attr name="MiddleLayerTop" format="dimension"/>
<attr name="MiddleLayerBottom" format="dimension"/>
<attr name="MiddleLayerLeft" format="dimension"/>
<attr name="MiddleLayerRight" format="dimension"/>
<!--上层图片资源坐标设置-->
<attr name="TopLayerTop" format="dimension"/>
<attr name="TopLayerBottom" format="dimension"/>
<attr name="TopLayerLeft" format="dimension"/>
<attr name="TopLayerRight" format="dimension"/>
</declare-styleable>
在布局中引入：
<com.example.montionlayout3d.view.Layout3D
android:id="@+id/vg3D"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@color/titi"
app:TopLayer="@drawable/circle"
app:MiddleLayer="@drawable/star1"
app:BottomLayer="@drawable/back"
layout3d:MiddleLayerTop="30dp"
layout3d:MiddleLayerBottom="70dp"
layout3d:MiddleLayerLeft="300dp"
layout3d:MiddleLayerRight="340dp"
layout3d:TopLayerTop="50dp"
layout3d:TopLayerBottom="200dp"
layout3d:TopLayerLeft="20dp"
layout3d:TopLayerRight="170dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
