Android中的精灵效果动画

Question

我要求实施如下所示的精灵效果动画。

参考：

• https://github.com/Ciechan/BCGenieEffect

我无法理解从哪里开始。有谁能建议我一些想法？

我尝试了一些基本动画的代码，比如翻译和缩放，但没有成功。

Answer 1

我已使用游戏库 AndEngine

实施此代码

请在下面找到附加的代码，以帮助您进一步移动..  您可以使用此代码作为片段来获取Android代码或生成实例  这段代码再次从活动中扩展以重用此代码。

此zip文件包含2个项目：

1. 上述效果的代码实现和
2. 你需要添加到我的项目中的AndEngine库。

<强> Click here to Download My Code

Answer 2

我尝试制作像精灵效果这样的动画。但它并不像你的图像展示那么完美，但它会在你的研究中帮助你。

Example Video of demo

在res中创建anim文件夹。 copy falling.xml

<强> falling.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator" >

    <translate
        android:duration="750"
        android:fromXDelta="0%p"
        android:fromYDelta="10%p"
        android:toXDelta="0%"
        android:toYDelta="50%" />

    <scale
        android:duration="750"
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="100%"
        android:toXScale="0"
        android:toYScale="0" />

</set>

使用以下java代码在按钮单击时应用动画。

final Animation animationFalling = AnimationUtils
                        .loadAnimation(GenieEffectActivity.this, R.anim.falling);
                imgview.startAnimation(animationFalling);

希望它对你有所帮助。

Answer 3

我有一个浏览器解决方案。

查看https://github.com/kamilkp/geniejs

和http://kamilkp.github.io/用于演示。

它适用于包括移动设备在内的所有浏览器（虽然在Firefox上并不总是顺畅）。它支持每个方向（顶部，底部，左侧，右侧）的精灵效果过渡。即使目标html元素是某个具有溢出自动或隐藏的容器的子元素，它也能工作。它本身是库不可知的，但我也写了一个方便的jQuery插件。如果您还在项目中包含html2canvas库，该插件可让您使用精灵效果为HTML元素设置动画（此处展开示例：http://kamilkp.co.nf/genie/canvas/）

浏览器的唯一要求是它需要支持CSS转换。这是一个纯粹的javascript + CSS解决方案。

PS。您可以使用Phonegap从Web应用程序创建Android应用程序。