在钛 javascript 中将屏幕移动到图像上答案

【问题标题】：move screen over image in titanium javascript在钛 javascript 中将屏幕移动到图像上
【发布时间】：2016-11-17 15:49:54
【问题描述】：

我需要在这个网站上创建一个这样的效果，名字是：

Link from the example site

//I need this in javascript

问题在于创建的效果是具有所有设计的图像。如何在整个图像中移动并仅在 javascript 中为 android 和 IOS 显示图像的一部分？

【问题讨论】：

标签： javascript android ios titanium appcelerator-titanium

【解决方案1】：

我使用它实现了它

index.xml

<Alloy>
<Window class="container">
    <Label id="label" top="80" onClick="doClick">Play Sign</Label>
    <View height="84">
        <ImageView width="255" height="7224" id="sigimage" top="0" image="/testImages/0D8Zt.png"></ImageView>
    </View>
</Window>
</Alloy>

index.tss

".container": {
    backgroundColor:"white"
}
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

"#label": {
    font: {
        fontSize: 18
    }
}

index.js

var interval = null;
var i=0;

function doClick(e) {
    clearInterval(interval);
    i = 0;
    replay();
}
replay();
function replay(){
    interval = setInterval(function(){
        if(i<86){
            $.sigimage.top = -i*84;
            i++;
            Ti.API.info('i = '+i);
        }else{
            clearInterval(interval);
        }
    },10);
}

$.index.open();

一个小技巧，希望对你有帮助。 :)

【讨论】：

我编辑了一些代码，但解决了我的问题。谢谢

【解决方案2】：

由于您已经有了图像列表，因此非常简单。首先，在Alloy中制作一个imageView

<ImageView id="signature" />

接下来添加tss中的所有图片，并以ms为单位设置单张图片的速度

"#signature": {
    images: ['image1.png','image2.png','image3.png',....],
    duration: 50,
    repeatCount: 1
}

在我的示例中，我将其设置为 50 毫秒。这意味着您每秒有 20 张图像。我还将repeatCount 设置为 1，这样它就不会重复（0 是默认值且无穷无尽）

然后，只要您希望签名“开始”，就在 js 控制器文件中调用 start()：

$.signature.start();

阅读docs 了解它。

【讨论】：

但我认为它只有一个图像。