Appcelerator - iOS:使用动画方法设置动画视图的不透明度,不要更改不透明度属性

时间:2017-03-10 16:19:20

标签: appcelerator appcelerator-titanium

使用动画({})方法更改视图的不透明度,不要更改视图的不透明度属性。

这很正常吗?

jira

上的相关故障单

测试代码

var win = Ti.UI.createWindow({
    backgroundColor: "white"
});
var view = Ti.UI.createView({
    width : 100,height : 100,backgroundColor : "red",opacity : 1.0
});
var label = Ti.UI.createLabel({
    width : Ti.UI.FILL,top : 30,color : "red",textAlign : "center",font : {fontSize : 20}
});
var buttons = Ti.UI.iOS.createTabbedBar({
    bottom : 30,labels : ["Without animate","With animate"],index : 0,tintColor : "red"
});

var temp = true;
setInterval(function(e){
    if(temp){
        if(buttons.index == 0)
            view.opacity = 0.0;
        else
            view.animate({ opacity : 0.0 , duration : 0});
    }else{
        if(buttons.index == 0)
            view.opacity = 1.0;
        else
            view.animate({ opacity : 1.0 , duration : 0});
    }
    temp = !temp;
    label.text = "view opacity: " + view.opacity;
},200);
win.add(label,view,buttons);
win.open();

enter image description here

1 个答案:

答案 0 :(得分:2)

一切都按预期工作。所有您需要了解的信息都是关于动画如何在任何平台上运行的更多信息,无论是原生Android,iOS还是Titanium本身。

视图,按钮等上制作动画,仅移动该元素屏幕上的渲染像素,但其属性为'价值保持不变。

所以,如果你愿意,那么你可以设置View的原始左值= 10,然后将它设置为100,你会发现在完成这个动画后 - 左边仍然是= 10(不是100)。

因此,您需要在动画结束时通过在 animate()方法中传递回调来自行设置这些属性。

请记住,任何UI元素的属性都有自己的getter&更改元素呈现的setter方法,反之亦然。

这是您的代码(稍加修改),可以为您提供您想看到的内容。

var win = Ti.UI.createWindow({
    backgroundColor: "white"
});
var view = Ti.UI.createView({
    width : 100,height : 100,backgroundColor : "red",opacity : 1.0,
    left : 10
});
var label = Ti.UI.createLabel({
    width : Ti.UI.FILL,top : 30,color : "red",textAlign : "center",font : {fontSize : 20}
});
var buttons = Ti.UI.iOS.createTabbedBar({
    bottom : 30,labels : ["Without animate","With animate"],index : 0,tintColor : "red"
});

var temp = true;

setTimeout(function () {
    view.animate({
        left : 100,
        duration : 1000
    }, function () {
        view.left = 100;   // commenting this line will give you left = 10
        label.text = "view left: " + view.left;
    });
}, 1000);

win.add(label,view,buttons);
win.open();