TreeItemAnimation class
An {@link Animation} used to open the child elements. If a {@link TreeItem} is in the process of opening, it will immediately be opened and the new {@link TreeItem} will use this animation.
class TreeItemAnimation extends Animation { /** * The {@link TreeItem} currently being affected. */ TreeItem _curItem = null; /** * Whether the item is being opened or closed. */ bool _opening = true; /** * The target height of the child items. */ int _scrollHeight = 0; TreeItemAnimation([AnimationScheduler scheduler = null]) : super(scheduler); /** * Open the specified {@link TreeItem}. * * @param item the {@link TreeItem} to open * @param animate true to animate, false to open instantly */ void setItemState(TreeItem item, animate) { // Immediately complete previous open cancel(); // Open the new item if (animate) { _curItem = item; _opening = item._open; run(dart_math.min(TreeItem._ANIMATION_DURATION, TreeItem._ANIMATION_DURATION_PER_ITEM * _curItem.getChildCount())); } else { UiObject.setVisible(item._childSpanElem, item._open); } } void onComplete() { if (_curItem != null) { if (_opening) { UiObject.setVisible(_curItem._childSpanElem, true); onUpdate(1.0); Dom.setStyleAttribute(_curItem._childSpanElem, "height", "auto"); } else { UiObject.setVisible(_curItem._childSpanElem, false); } Dom.setStyleAttribute(_curItem._childSpanElem, "overflow", "visible"); Dom.setStyleAttribute(_curItem._childSpanElem, "width", "auto"); _curItem = null; } } void onStart() { _scrollHeight = 0; // If the TreeItem is already open, we can get its scrollHeight // immediately. if (!_opening) { _scrollHeight = _curItem._childSpanElem.scrollHeight; } Dom.setStyleAttribute(_curItem._childSpanElem, "overflow", "hidden"); // If the TreeItem is already open, onStart will set its height to its // natural height. If the TreeItem is currently closed, onStart will set // its height to 1px (see onUpdate below), and then we make the TreeItem // visible so we can get its correct scrollHeight. super.onStart(); // If the TreeItem is currently closed, we need to make it visible before // we can get its height. if (_opening) { UiObject.setVisible(_curItem._childSpanElem, true); _scrollHeight = _curItem._childSpanElem.scrollHeight; } } void onUpdate(double progress) { int height = (progress * _scrollHeight).toInt(); if (!_opening) { height = _scrollHeight - height; } // Issue 2338: If the height is 0px, IE7 will display all of the children // instead of hiding them completely. height = dart_math.max(height, 1); _curItem._childSpanElem.style.height = "$height px"; // We need to set the width explicitly of the item might be cropped int scrollWidth = Dom.getElementPropertyInt(_curItem._childSpanElem, "scrollWidth"); _curItem._childSpanElem.style.width = "$scrollWidth px"; } }
Extends
Animation > TreeItemAnimation
Constructors
new TreeItemAnimation([AnimationScheduler scheduler = null]) #
Construct a new {@link AnimationScheduler} using the specified scheduler to sheduler request frames.
@param scheduler an {@link AnimationScheduler} instance
TreeItemAnimation([AnimationScheduler scheduler = null]) : super(scheduler);
Properties
int duration #
The duration of the {@link Animation} in milliseconds.
int duration = -1
bool isStarted #
Has the {@link Animation} actually started.
bool isStarted = false
AnimationHandle requestHandle #
The ID of the pending animation request.
AnimationHandle requestHandle
int runId #
The unique ID of the current run. Used to handle cases where an animation is restarted within an execution block.
int runId = -1
bool running #
Is the animation running, even if it hasn't started yet.
bool running = false
Methods
void cancel() #
Immediately cancel this animation. If the animation is running or is scheduled to run, {@link #onCancel()} will be called.
void cancel() { // Ignore if the animation is not currently running. if (!running) { return; } // Reset the state. wasStarted = isStarted; // Used by onCancel. element = null; running = false; isStarted = false; // Cancel the animation request. if (requestHandle != null) { requestHandle.cancel(); requestHandle = null; } onCancel(); }
double interpolate(double progress) #
Interpolate the linear progress into a more natural easing function.
Depending on the {@link Animation}, the return value of this method can be less than 0.0 or greater than 1.0.
@param progress the linear progress, between 0.0 and 1.0 @return the interpolated progress
double interpolate(double progress) { return (1 + dart_math.cos(dart_math.PI + progress * dart_math.PI)) / 2; }
bool isRunning(int curRunId) #
Check if the specified run ID is still being run.
@param curRunId the current run ID to check @return true if running, false if canceled or restarted
bool isRunning(int curRunId) { return running && (runId == curRunId); }
void onCancel() #
Called immediately after the animation is canceled. The default implementation of this method calls {@link #onComplete()} only if the animation has actually started running.
void onCancel() { if (wasStarted) { onComplete(); } }
void onComplete() #
Called immediately after the animation completes.
void onComplete() { if (_curItem != null) { if (_opening) { UiObject.setVisible(_curItem._childSpanElem, true); onUpdate(1.0); Dom.setStyleAttribute(_curItem._childSpanElem, "height", "auto"); } else { UiObject.setVisible(_curItem._childSpanElem, false); } Dom.setStyleAttribute(_curItem._childSpanElem, "overflow", "visible"); Dom.setStyleAttribute(_curItem._childSpanElem, "width", "auto"); _curItem = null; } }
void onStart() #
Called immediately before the animation starts.
void onStart() { _scrollHeight = 0; // If the TreeItem is already open, we can get its scrollHeight // immediately. if (!_opening) { _scrollHeight = _curItem._childSpanElem.scrollHeight; } Dom.setStyleAttribute(_curItem._childSpanElem, "overflow", "hidden"); // If the TreeItem is already open, onStart will set its height to its // natural height. If the TreeItem is currently closed, onStart will set // its height to 1px (see onUpdate below), and then we make the TreeItem // visible so we can get its correct scrollHeight. super.onStart(); // If the TreeItem is currently closed, we need to make it visible before // we can get its height. if (_opening) { UiObject.setVisible(_curItem._childSpanElem, true); _scrollHeight = _curItem._childSpanElem.scrollHeight; } }
void onUpdate(double progress) #
Called when the animation should be updated.
The value of progress is between 0.0 and 1.0 (inclusive) (unless you override the {@link #interpolate(double)} method to provide a wider range of values). You can override {@link #onStart()} and {@link #onComplete()} to perform setup and tear down procedures.
@param progress a double, normally between 0.0 and 1.0 (inclusive)
void onUpdate(double progress) { int height = (progress * _scrollHeight).toInt(); if (!_opening) { height = _scrollHeight - height; } // Issue 2338: If the height is 0px, IE7 will display all of the children // instead of hiding them completely. height = dart_math.max(height, 1); _curItem._childSpanElem.style.height = "$height px"; // We need to set the width explicitly of the item might be cropped int scrollWidth = Dom.getElementPropertyInt(_curItem._childSpanElem, "scrollWidth"); _curItem._childSpanElem.style.width = "$scrollWidth px"; }
void run(int duration, {int startTime: null, Element element: null}) #
Run this animation at the given startTime. If the startTime has already passed, the animation will run synchronously as if it started at the specified start time. If the animation is already running, it will be canceled first. <p> If the element is not <code>null</code>, the {@link #onUpdate(double)} method might be called only if the element may be visible (generally left at the appreciation of the browser). Otherwise, it will be called unconditionally.
@param duration the duration of the animation in milliseconds @param startTime the synchronized start time in milliseconds @param element the element that visually bounds the entire animation
void run(int duration, {int startTime:null, dart_html.Element element:null}) { // Cancel the animation if it is running cancel(); if (startTime == null) { startTime = (new DateTime.now()).millisecondsSinceEpoch; } // Save the duration and startTime running = true; isStarted = false; this.duration = duration; this.startTime = startTime; this.element = element; ++runId; // Execute the first callback. callback.execute((new DateTime.now()).millisecondsSinceEpoch); }
void setItemState(TreeItem item, animate) #
Open the specified {@link TreeItem}.
@param item the {@link TreeItem} to open @param animate true to animate, false to open instantly
void setItemState(TreeItem item, animate) { // Immediately complete previous open cancel(); // Open the new item if (animate) { _curItem = item; _opening = item._open; run(dart_math.min(TreeItem._ANIMATION_DURATION, TreeItem._ANIMATION_DURATION_PER_ITEM * _curItem.getChildCount())); } else { UiObject.setVisible(item._childSpanElem, item._open); } }
bool update(int curTime) #
Update the {@link Animation}.
@param curTime the current time @return true if the animation should run again, false if it is complete
bool update(int curTime) { /* * Save the run id. If the runId is incremented during this execution block, * we know that this run has been canceled. */ int curRunId = runId; bool finished = curTime >= startTime + duration; if (isStarted && !finished) { // Animation is in progress. double progress = (curTime - startTime) / duration; onUpdate(interpolate(progress)); return isRunning(curRunId); // Check if this run was canceled. } if (!isStarted && curTime >= startTime) { /* * Start the animation. We do not call onUpdate() because onStart() calls * onUpdate() by default. */ isStarted = true; onStart(); if (!isRunning(curRunId)) { // This run was canceled. return false; } // Intentional fall through to possibly end the animation. } if (finished) { // Animation is complete. running = false; isStarted = false; onComplete(); return false; } return true; }