Compose版来啦！仿自如裸眼3D效果

前段时间自如团队实现了App裸眼3D效果，确实让人眼前一亮，昨天Nayuta 大佬使用Flutter也实现了该功能，那Jetpack compose版本怎么能落下。

前人栽树后人乘凉，首先在这里感谢自如大前端团队 和Nayuta ，下文所用的素材也有一部分来自Nayuta ，再次感谢。

思路

从自如团队所提供的思路来看，裸眼3D效果是将整个图片结构分为3层：上层、中层、以及底层。
在手机左右上下旋转时，上层和底层的图片呈相反的方向进行移动，中层则不动，在视觉上给人一种3D的效果。

至于使用Jetpack Compose来实现，主要想法如下：

1. 使用Compose 的Canvas对三层图片进行绘制，且使用translate对上层和底层图片进行平移；
2. 注册手机陀螺仪传感器的监听，拿到手机旋转时，xyz轴的旋转角度；
3. 根据旋转角度计算图片平移的距离，期间做好最大平移距离的控制；
4. 得到平移距离后，将距离设置给标记了mutableStateOf的平移距离变量，使得UI刷新，呈平移效果。

实现

根据上面的思路，我们首先使用compose绘制出静态的三张图片，compose绘制图片的方式有多种，Image、Canvas等，因为考虑到后面图片需要进行移动，这里就选用Canvas进行绘制。

val imageBack = ImageBitmap.imageResource(id = R.drawable.back)
val imageMid = ImageBitmap.imageResource(id = R.drawable.mid)
val imageFore = ImageBitmap.imageResource(id = R.drawable.fore)

Canvas(
    modifier = Modifier
        .fillMaxSize()) {
   
        //底层
    drawImage(imageBack)
    //中层
    drawImage(imageMid)
    //s
    drawImage(imageFore)
    
}

生成静态的效果图如下：

静态图片加载是件简单的事情，那如何让图片动起来？

Compose的Canvas中有一个translate方法，作平移效果用，也就是分别在x和y坐标中通过给定的像素增量对坐标空间进行平移。参数传入x轴上平移的距离以及y轴上平移的距离。这里分别定义为xDistance,yDistance。因为只有上层和底层的图片会进行移动，所以在Canvas中，对上层和底层图片的绘制加上translate，如下：

 translate(