如何在 AIR Android 应用程序中平滑滚动内容?
How to smoothly scroll content in an AIR Android Application?
我写了一个小的 class 用于在移动设备上滚动内容。 class 工作正常,但滚动感觉不流畅。这是 class:
package {
import flash.display.Sprite;
import flash.display.InteractiveObject;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.InteractiveObject;
import flash.geom.Rectangle;
import com.greensock.TweenMax;
import com.greensock.easing.*;
import flash.utils.setTimeout;
public class FlickScroll extends Sprite {
private var currentY:Number;
private var lastY:Number;
private var vy:Number;
public var clickable:Boolean = true;
private var dragging:Boolean = false;
private var firstY:Number;
private var secondY:Number;
private var content:InteractiveObject;
private var masker:InteractiveObject;
private var topBounds:Number;
private var bottomBounds:Number;
private var Offset:Number;
public var friction:Number = .90;
public var flickable:Boolean = false;
public var scrollVelocity:Number;
public function FlickScroll(Masker:InteractiveObject, Content:InteractiveObject, TopBounds:Number, BottomBounds:Number) {
masker = Masker;
content = Content;
topBounds = TopBounds;
bottomBounds = BottomBounds;
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
}
private function onAddedToStage(evt:Event):void
{
init();
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
content.mask = masker;
content.cacheAsBitmap = true;
}
private function init():void
{
currentY = content.y;
lastY = content.y;
vy = 0;
scrollVelocity = 2;
content.addEventListener(MouseEvent.MOUSE_DOWN, onContentDown, false, 0, true);
}
private function onContentDown(evt:MouseEvent):void
{
firstY = content.y;
Offset = content.mouseY;
trace(mouseY, Offset, mouseY - Offset);
content.addEventListener(MouseEvent.MOUSE_MOVE, onContentMove, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, onContentUp, false, 0, true);
}
private function onContentMove(evt:MouseEvent):void
{
dragging = true;
clickable = false;
content.y = mouseY - Offset;
if(content.y > topBounds + 200)
{
content.y = topBounds + 200;
}
else if(content.y < bottomBounds - 200)
{
content.y = bottomBounds - 200;
}
trace("ContentY: ", content.y, "Bottom Bounds: ", bottomBounds, "Top Bounds: ", topBounds);
evt.updateAfterEvent();
}
private function onContentUp(evt:MouseEvent):void
{
secondY = content.y;
var dy:Number = secondY - firstY;
if(dy < 20 && dy > -20)
{
clickable = true;
}
if(content.y > this.topBounds)
{
TweenMax.to(content, .4, {y:topBounds, ease:Expo.easeOut});
}
else if( content.y < this.bottomBounds)
{
TweenMax.to(content, .4, {y:bottomBounds, ease:Expo.easeOut});
}
else
{
dragging = false;
}
//setTimeout(setDraggingFalse, 400);
content.removeEventListener(MouseEvent.MOUSE_MOVE, onContentMove);
content.removeEventListener(MouseEvent.MOUSE_UP, onContentUp);
}
private function onLoop(evt:Event):void
{
if(this.flickable)
{
if(dragging)
{
lastY = currentY;
currentY = mouseY;
vy = (currentY - lastY)/scrollVelocity;
}
else
{
content.y += vy;
vy *= friction;
}
}
if(!dragging)
{
if(content.y > topBounds)
{
content.y = topBounds;
}
else if(content.y < bottomBounds)
{
content.y = bottomBounds;
}
}
}
public function updateBounds(top:Number, bottom:Number):void
{
bottomBounds = bottom;
topBounds = top;
}
private function setDraggingFalse():void
{
dragging = false;
}
}
}
抱歉,代码真的很乱。
我可以采取哪些步骤使滚动感觉更流畅?任何帮助是极大的赞赏。
如果您使用的是位图,请尝试遵循 this 指南。它处理位图的平滑滚动。
如果您正在处理动画片段,startDrag() 和 stopDrag() 也不错。也许添加一个 Tween 并根据鼠标最后 y 和当前 y 的逐帧比较对其进行减速,以在释放鼠标时获得 "thrust"。可能必须在鼠标移动事件上锁定影片剪辑的 x 位置(或 y 位置,具体取决于您希望它如何滚动)。
我写了一个小的 class 用于在移动设备上滚动内容。 class 工作正常,但滚动感觉不流畅。这是 class:
package {
import flash.display.Sprite;
import flash.display.InteractiveObject;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.InteractiveObject;
import flash.geom.Rectangle;
import com.greensock.TweenMax;
import com.greensock.easing.*;
import flash.utils.setTimeout;
public class FlickScroll extends Sprite {
private var currentY:Number;
private var lastY:Number;
private var vy:Number;
public var clickable:Boolean = true;
private var dragging:Boolean = false;
private var firstY:Number;
private var secondY:Number;
private var content:InteractiveObject;
private var masker:InteractiveObject;
private var topBounds:Number;
private var bottomBounds:Number;
private var Offset:Number;
public var friction:Number = .90;
public var flickable:Boolean = false;
public var scrollVelocity:Number;
public function FlickScroll(Masker:InteractiveObject, Content:InteractiveObject, TopBounds:Number, BottomBounds:Number) {
masker = Masker;
content = Content;
topBounds = TopBounds;
bottomBounds = BottomBounds;
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
}
private function onAddedToStage(evt:Event):void
{
init();
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
content.mask = masker;
content.cacheAsBitmap = true;
}
private function init():void
{
currentY = content.y;
lastY = content.y;
vy = 0;
scrollVelocity = 2;
content.addEventListener(MouseEvent.MOUSE_DOWN, onContentDown, false, 0, true);
}
private function onContentDown(evt:MouseEvent):void
{
firstY = content.y;
Offset = content.mouseY;
trace(mouseY, Offset, mouseY - Offset);
content.addEventListener(MouseEvent.MOUSE_MOVE, onContentMove, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, onContentUp, false, 0, true);
}
private function onContentMove(evt:MouseEvent):void
{
dragging = true;
clickable = false;
content.y = mouseY - Offset;
if(content.y > topBounds + 200)
{
content.y = topBounds + 200;
}
else if(content.y < bottomBounds - 200)
{
content.y = bottomBounds - 200;
}
trace("ContentY: ", content.y, "Bottom Bounds: ", bottomBounds, "Top Bounds: ", topBounds);
evt.updateAfterEvent();
}
private function onContentUp(evt:MouseEvent):void
{
secondY = content.y;
var dy:Number = secondY - firstY;
if(dy < 20 && dy > -20)
{
clickable = true;
}
if(content.y > this.topBounds)
{
TweenMax.to(content, .4, {y:topBounds, ease:Expo.easeOut});
}
else if( content.y < this.bottomBounds)
{
TweenMax.to(content, .4, {y:bottomBounds, ease:Expo.easeOut});
}
else
{
dragging = false;
}
//setTimeout(setDraggingFalse, 400);
content.removeEventListener(MouseEvent.MOUSE_MOVE, onContentMove);
content.removeEventListener(MouseEvent.MOUSE_UP, onContentUp);
}
private function onLoop(evt:Event):void
{
if(this.flickable)
{
if(dragging)
{
lastY = currentY;
currentY = mouseY;
vy = (currentY - lastY)/scrollVelocity;
}
else
{
content.y += vy;
vy *= friction;
}
}
if(!dragging)
{
if(content.y > topBounds)
{
content.y = topBounds;
}
else if(content.y < bottomBounds)
{
content.y = bottomBounds;
}
}
}
public function updateBounds(top:Number, bottom:Number):void
{
bottomBounds = bottom;
topBounds = top;
}
private function setDraggingFalse():void
{
dragging = false;
}
}
}
抱歉,代码真的很乱。 我可以采取哪些步骤使滚动感觉更流畅?任何帮助是极大的赞赏。
如果您使用的是位图,请尝试遵循 this 指南。它处理位图的平滑滚动。
如果您正在处理动画片段,startDrag() 和 stopDrag() 也不错。也许添加一个 Tween 并根据鼠标最后 y 和当前 y 的逐帧比较对其进行减速,以在释放鼠标时获得 "thrust"。可能必须在鼠标移动事件上锁定影片剪辑的 x 位置(或 y 位置,具体取决于您希望它如何滚动)。