material-motion
Version:
Makes it easy to add rich, interactive motion to your application.
82 lines (81 loc) • 3.46 kB
TypeScript
/** @license
* Copyright 2016 - present The Material Motion Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
import { Axis, State } from '../enums';
import { MotionProperty } from '../observables/';
import { ObservableWithMotionOperators, Point2D, TranslateStyleStreams } from '../types';
import { Draggable } from './Draggable';
import { Point2DSpring } from './Point2DSpring';
export declare type TossableArgs = {
draggable: Draggable;
spring: Point2DSpring;
};
export declare class Tossable {
readonly state$: MotionProperty<State>;
readonly state: State;
/**
* This is the point from which all other resistance calculations are
* measured.
*/
readonly resistanceOrigin$: MotionProperty<Point2D>;
resistanceOrigin: Point2D;
/**
* This is the distance from the origin that an item can be freely dragged
* without encountering resistance.
*/
readonly radiusUntilResistance$: MotionProperty<number>;
radiusUntilResistance: number;
/**
* For carousels or swipeable lists, this is the width of one item.
*
* To apply resistance, the calculation needs to determine the amount of
* progress through a drag. `resistanceBasis` is the denominator in this
* calculation. For instance, if a drag is 20px beyond `radiusUntilResistance`
* and `resistanceBasis` is 50, the drag progress used by the resistance
* calculation is 40%.
*
* Note: a drag cannot move farther than `resistanceBasis` beyond
* `radiusUntilResistance`.
*/
readonly resistanceBasis$: MotionProperty<number>;
resistanceBasis: number;
/**
* This value determines how far beyond `radiusUntilResistance` a drag is
* limited to.
*
* It works in conjunction with `resistanceBasis`. If `resistanceBasis` is 50
* and `resistanceFactor` is 5, the drag is limited to 10px (basis / factor)
* beyond `radiusUntilResistance`.
*/
readonly resistanceFactor$: MotionProperty<number>;
resistanceFactor: number;
readonly location$: MotionProperty<Point2D>;
readonly velocity$: ObservableWithMotionOperators<Point2D>;
readonly draggedLocation$: ObservableWithMotionOperators<Point2D>;
readonly draggable: Draggable;
readonly spring: Point2DSpring;
readonly styleStreams: TranslateStyleStreams;
constructor({draggable, spring}: TossableArgs);
}
export default Tossable;
export declare type ApplyLinearResistanceToTossableArgs = {
tossable: Tossable;
min$: ObservableWithMotionOperators<number>;
max$: ObservableWithMotionOperators<number>;
axis$: ObservableWithMotionOperators<Axis>;
basis$: ObservableWithMotionOperators<number>;
factor$: ObservableWithMotionOperators<number>;
};
export declare function applyLinearResistanceToTossable({tossable, min$, max$, axis$, basis$, factor$}: ApplyLinearResistanceToTossableArgs): void;