在矩形的邊緣使圖像消失

Question

我必須在閃光燈中移動一些圖片。所以我在我的主要MovieClip（我通過Loader類獲得）中獲得了背景圖像。在圖像中我有矩形。我將把小圖像放在這個矩形中並移動它。我需要小圖像在穿過矩形邊界時慢慢消失。 我試圖在矩形中放置另一個動畫片段並在此動畫片段中移動圖像。但在穿過矩形時，圖像不會消失。圖像繼續運動而不消失。 跨越矩形邊界時如何使圖像消失？ 對不起，我的英文。

Answer 1

1. 獲取TweenLite。這是一個動畫「補間」圖書館，使動畫變得輕而易舉。還有其他的，但這是我使用的。

2. 這取決於您使用的方法來移動和檢測您的矩形重疊圖像&。

讓我們想象你有兩個正方形（紅色正方形和藍色正方形），並且每當它重疊藍色正方形時，你想讓紅色正方形淡出。這是通過鼠標，鍵盤還是預先計算的移動來執行保證的日食嗎？褪色是重疊百分比的一個因素，還是在與藍色方格接觸的瞬間，直線式0到100定時過渡？從您給出的描述中不清楚您期望您的代碼執行的是什麼。請查看SO's "Asking" section，以幫助提高問題的質量，以便您找到正確的答案。

這就是說，這裏是你能解決這個問題的一種方法：我需要紅場1-100個慢慢消失，而過路的藍色方形

import com.greensock.*; 

// Create some sample red & blue squares 
var red:Sprite = new Sprite(); 
red.graphics.beginFill(0xFF0000, 1); 
red.graphics.drawRect(0, 0, 100, 100); 
red.graphics.endFill(); 

addChild(red); 
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateRed); 

var blue:Sprite = new Sprite(); 
blue.graphics.beginFill(0x0000FF, 1); 
blue.graphics.drawRect(0, 0, 100, 100); 
blue.graphics.endFill(); 
addChild(blue); 
blue.x = 200; 
blue.y = 100; 

var overlap:Boolean = false; // global state tracker 

function updateRed(e:MouseEvent):void { 
    // Position the red square every time the mouse moves 
    red.x = stage.mouseX - red.width/2; // center relative to red square's dimensions 
    red.y = stage.mouseY - red.height/2; 

    if (red.hitTestObject(blue) && overlap != true) { 
     // Make sure we only animate on the initial overlap 
     overlap = true; 
     TweenLite.to(red, 1, {alpha:0}); 
    } else if (red.hitTestObject(blue) == false && overlap) { 
     // And converserly, on the initial exit 
     overlap = false; 
     TweenLite.to(red, 1, {alpha:1}); 
    } 
}