前言

阅读本文需要一定compose基础，如果没有请移步Jetpack Compose入门详解（实时更新）

在网上看到有人用css写出了下面这种效果；原文链接

我看到了觉得很好玩，于是用Compose撸了一个随手势移动眼珠的版本。

一、Canvas画图

这种笑脸常用的控件肯定实现不了，我们只能用Canvas自己画了

笑脸

我们先画脸

下例当中的size和center都是onDraw 的DrawScope提供的属性，drawCircle则是DrawScope提供的画圆的方法

Canvas(modifier = modifier

        .size(300.dp),

        onDraw = {

// 脸

            drawCircle(

                color = Color(0xfffecd00),

                radius = size.width / 2,

                center = center

            )


    })

属性解释

• 
  
• color：填充颜色
  
• radius： 半径
  
• center： 圆心坐标
  

这里我们半径取屏幕宽度一半，圆心取屏幕中心，画出来的脸效果如下

微笑

微笑是一个弧形，我们使用drawArc来画微笑

// 微笑
val smilePadding = size.width / 4


        drawArc(

            color = Color(0xffb57700),

            startAngle = 0f,

            sweepAngle = 180f,

            useCenter = true,

            topLeft = Offset(smilePadding, size.height / 2 - smilePadding / 2),

            size = Size(size.width / 2, size.height / 4)

        )

属性解释

• 
  
• color：填充颜色
  
• startAngle： 弧形开始的角度，默认以3点钟方向为0度
  
• sweepAngle：弧形结束的角度，默认以3点钟方向为0度
  
• useCenter ：指示圆弧是否要闭合边界中心的标志（上例加不加都无所谓）
  
• topLeft ：相对于当前平移从0的本地原点偏移，0开始
  
• size：要绘制的圆弧的尺寸
  

效果如下

眼睛和眼珠子

眼睛也是drawCircle方法，只是位置不同，这边就不再多做解释

            // 左眼

            drawCircle(

                color = Color.White,

                center = Offset(smilePadding, size.height / 2 - smilePadding / 2),

                radius = smilePadding / 2

            )


//左眼珠子

                drawCircle(

                    color = Color.Black,

                    center = Offset(smilePadding, size.height / 2 - smilePadding / 2),

                    radius = smilePadding / 4

                )



// 右眼

            drawCircle(

                color = Color.White,

                center = Offset(smilePadding * 3, size.height / 2 - smilePadding / 2),

                radius = smilePadding / 2

            )


//右眼珠子

                drawCircle(

                    color = Color.Black,

                    center = Offset(smilePadding * 3, size.height / 2 - smilePadding / 2),

                    radius = smilePadding / 4

                )

整个笑脸就画出来了，效果如下

二、跟随手势移动

在实现功能之前我们需要介绍transformable ，animateFloatAsState和translate

transformable

transformable是modifier用于平移、缩放和旋转的多点触控手势的修饰符，此修饰符本身不会转换元素，只会检测手势。

animateFloatAsState

animateFloatAsState 是通过Float状态变化来控制动画 的状态

知道了这两个玩意过后我们就可以先通过transformable监听手势滑动然后通过translate方法和animateFloatAsState方法组成一个平移动画来实现眼珠跟随手势移动

完整的代码：

@Composable
fun SmileyFaceCanvas(

    modifier: Modifier

) {

var x by remember {

        mutableStateOf(0f)

    }

var y by remember {

        mutableStateOf(0f)

    }

val state = rememberTransformableState { _, offsetChange, _ ->


        x = offsetChange.x
if (offsetChange.x >50f){

            x = 50f

        }

if (offsetChange.x < -50f){

            x=-50f

        }


        y = offsetChange.y
if (offsetChange.y >50f){

            y= 50f

        }

if (offsetChange.y < -50f){

            y=-50f

        }

    }

val animTranslateX by animateFloatAsState(

        targetValue = x,

        animationSpec = TweenSpec(1000)

    )

val animTranslateY by animateFloatAsState(

        targetValue = y,

        animationSpec = TweenSpec(1000)

    )




    Canvas(

        modifier = modifier

            .size(300.dp)

            .transformable(state = state)

    ) {



// 脸

        drawCircle(

            Color(0xfffecd00),

            radius = size.width / 2,

            center = center

        )

// 微笑
val smilePadding = size.width / 4


        drawArc(

            color = Color(0xffb57700),

            startAngle = 0f,

            sweepAngle = 180f,

            useCenter = true,

            topLeft = Offset(smilePadding, size.height / 2 - smilePadding / 2),

            size = Size(size.width / 2, size.height / 4)

        )

// 左眼

        drawCircle(

            color = Color.White,

            center = Offset(smilePadding, size.height / 2 - smilePadding / 2),

            radius = smilePadding / 2

        )


        translate(left = animTranslateX, top = animTranslateY) {
//左眼珠子

            drawCircle(

                color = Color.Black,

                center = Offset(smilePadding, size.height / 2 - smilePadding / 2),

                radius = smilePadding / 4

            )

        }


// 右眼

        drawCircle(

            color = Color.White,

            center = Offset(smilePadding * 3, size.height / 2 - smilePadding / 2),

            radius = smilePadding / 2

        )


        translate(left = animTranslateX, top = animTranslateY) {
//右眼珠子

            drawCircle(

                color = Color.Black,

                center = Offset(smilePadding * 3, size.height / 2 - smilePadding / 2),

                radius = smilePadding / 4

            )

        }



    }

}

为了不让眼珠子从眼眶里蹦出来，我们将位移的范围限制在了50以内，运行效果如下

总结

通过Canvas中的一些方法配合简单的动画API实