如何在Android Compose中使用剪贴板显示动画。

huangapple go评论72阅读模式
英文:

How show animation with clipboard in android compose

问题

I use Clipboard:

val clipboardManager: ClipboardManager = LocalClipboardManager.current
Icon(
    imageVector =  ImageVector.vectorResource(id = R.drawable.ic_copy_track_number),
    contentDescription = "Copy",
    modifier = Modifier
        .padding(start = 4.dp)
        .size(16.dp)
        .clickable {        
            clipboardManager.setText(AnnotatedString(trackNumber))
        }
)

And I had a question: how to make a temporary animation that changes color for the duration of a user's click (in this case, briefly replace it with another icon), for example, for 2 seconds?

英文:

I use Clipboard:

val clipboardManager: ClipboardManager = LocalClipboardManager.current
Icon(
     imageVector =  ImageVector.vectorResource(id = R.drawable.ic_copy_track_number),
     contentDescription = "Copy",
     modifier = Modifier
               .padding(start = 4.dp)
               .size(16.dp)
               .clickable {        
                           clipboardManager.setText(AnnotatedString(trackNumber))
                           }
    )

And I had a question: how to make a temporary animation that changes color for the duration of a user's click (in this case, briefly replace it with another icon), for example, for 2 seconds?

答案1

得分: 2

你需要使用一个 InteractionSource 对象。你可以在这里找到一个示例。

而不是使用 AnimatedVisibility,你需要为你的图标颜色添加一个无限动画:

@Composable
private fun ColourAnimatedButton(interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }) {
    val isPressed by interactionSource.collectIsPressedAsState()
    val infiniteTransition = rememberInfiniteTransition(label = "")
    
    val idleColor = Color.Blue
    val animatedColor by infiniteTransition.animateColor(
        initialValue = Color.Blue, targetValue = Color.Red, animationSpec = infiniteRepeatable(
            animation = keyframes {
                durationMillis = 1000 // 颜色变化的速度
            }, repeatMode = RepeatMode.Restart
        ), label = ""
    )
    
    Icon(imageVector =  ImageVector.vectorResource(id = R.drawable.ic_copy_track_number),
         contentDescription = "Copy", modifier = Modifier
           .padding(start = 4.dp)
           .size(16.dp).clickable(interactionSource, LocalIndication.current) {             
                 clipboardManager.setText(AnnotatedString(trackNumber))
            },
            tint = if (isPressed) animatedColor else idleColor
        )
}

编辑(一次性点击时的动画):
(移除 isPressedinfiniteTransitionidleColoranimatedColor,然后添加以下内容:

val color = remember { Animatable(Color.Black) }

点击监听器更改为以下内容:

.clickable(interactionSource, LocalIndication.current) {
     scope.launch {
         color.animateTo(Color.Blue, tween(500))
         color.animateTo(Color.Black, tween(500))
     }
 },

最后将颜色设置如下:tint = color.value

英文:

You need to use an InteractionSource object. You can find an example over here.

Instead of the AnimatedVisibility you'll need an infinite animation for your icon's colour:

@Composable
private fun ColourAnimatedButton(interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }) {
    val isPressed by interactionSource.collectIsPressedAsState()
    val infiniteTransition = rememberInfiniteTransition(label = "")

    val idleColor = Color.Blue
    val animatedColor by infiniteTransition.animateColor(
        initialValue = Color.Blue, targetValue = Color.Red, animationSpec = infiniteRepeatable(
            animation = keyframes {
                durationMillis = 1000 // the speed at which colours will change
            }, repeatMode = RepeatMode.Restart
        ), label = ""
    )

    Icon(imageVector =  ImageVector.vectorResource(id = R.drawable.ic_copy_track_number),
         contentDescription = "Copy", modifier = Modifier
           .padding(start = 4.dp)
           .size(16.dp).clickable(interactionSource, LocalIndication.current) {             
                 clipboardManager.setText(AnnotatedString(trackNumber))
            },
            tint = if (isPressed) animatedColor else idleColor
        )
    }

EDIT (onClick one-off animation)
(remove the isPressed, infiniteTransition, idleColor, and animatedColor and add this instead:

val color = remember { Animatable(Color.Black) }

Click listener changes to this:

.clickable(interactionSource, LocalIndication.current) {
     scope.launch {
         color.animateTo(Color.Blue, tween(500))
         color.animateTo(Color.Black, tween(500))
     }
 },

and finally set the colour like this: tint = color.value

huangapple
  • 本文由 发表于 2023年6月29日 17:18:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/76579718.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定