Есть такой код:
$(window).on('load resize', function() {
initContainer();
});
$(window).scroll(function(){
setMotionPath();
});
function initContainer() {
var element = $('.svg');
var motionPath = MorphSVGPlugin.pathDataToBezier("#way").reverse();
TweenLite.set("#circle", { transformOrigin: "50% 50%" });
setMotionPath();
};
function setMotionPath() {
var element = $('.svg');
var motionPath = MorphSVGPlugin.pathDataToBezier("#way").reverse();
TweenLite.to("#circle", 0, {
x: motionPath["x"],
y: motionPath["y"]
});
};
#circle {
transform-origin: 0px 0px 0px;
}
html,
body {
height: 200%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
}
CodePen
Вопрос: Как можно застваить круг двигаться по пути path плавно при скролле (желательно с использованием TweenMax)?
P.S: Путь path может быть какой угодно, прямая выбрана для примера, а так он может быть и такой:
Ответ
Вот обновленный вариант ответа. Это именно то что вы хотели.
Попытаюсь примерно объяснить что и как работает.
motionPath - это массив в котором содержится координаты линии, но в нем не по пиксельно есть все координаты. А линия разделяется на куски, и по каждому куску выбирается координат(центр). Когда вы методом TweenLite.to задаете одну пару координат то анимация доходит до него и останавливается. Но если попытаться так при скролле каждый раз дать новые координаты то анимация не будет плавной потому что при скролле не закончив первую часть пути круг уже получает новые координаты и идет по ним (выходя из линии).
Есть второй вариант. Даем сразу массив координат в метод TweenLite.to и в переменной сохраним идентификатор анимации tween = TweenLite.to.........
После этого мы уже можем манипулировать с анимацией (к примеру сделать паузу).
И еще один важным момент, tween уже имеет метод progress(), и его значение может быть от 0 до единицы. И если мы зададим промежуточный прогресс, то анимация возвратиться к нему.
Вот так и делаем, задаем прогресс при каждом скролле, и с разу же делаем паузу анимации.
Вот и наш ожидаемый результат.
$(window).on('load resize', function() {
initContainer();
});
$(window).scroll(function(){
setMotionPath();
});
function initContainer() {
var element = $('.svg');
var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"}).reverse();
TweenLite.set("#circle", {xPercent:-50, yPercent:-50});
setMotionPath();
};
function setMotionPath() {
var element = $('.svg');
var way = $('#way');
var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"}).reverse();
var progress_val = $(window).scrollTop()/5000;
tween = TweenLite.to("#circle", 3, {bezier:{values:motionPath, type:"cubic"}});
tween.progress( progress_val ).pause();
};
#circle {
transform-origin: 0px 0px 0px;
}
html,
body {
height: 400%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
position: fixed;
width: 100%;
}
Для прямой линии.
Здесь не нужен reverse получаемых координат. Этот плагин имеет большое количество опций. Все это уже можете посмотреть сами.
$(window).on('load resize', function() {
initContainer();
});
$(window).scroll(function(){
setMotionPath();
});
function initContainer() {
var element = $('.svg');
var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"}).reverse();
TweenLite.set("#circle", {xPercent:-50, yPercent:-50});
setMotionPath();
};
function setMotionPath() {
var element = $('.svg');
var way = $('#way');
var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"});
var progress_val = $(window).scrollTop()/1000;
tween = TweenLite.to("#circle", 3, {bezier:{values:motionPath, type:"cubic"}});
tween.progress( progress_val ).pause();
};
#circle {
transform-origin: 0px 0px 0px;
}
html,
body {
height: 400%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
position: fixed;
width: 100%;
}
Комментариев нет:
Отправить комментарий