Язык программирования:
Javascript
Среда программирования:
HTML5 + JavaScript + bonsai.js
<!DOCTYPE html> <html> <head> <script src="bonsai-0.4.1.min.js"></script> </head> <body> <div id="movie"></div> <script> bonsai.run(document.getElementById('movie'), { code: function() { var num = 30; //количество ромбов var width = 500; //ширина сцены для расчетов var height = 500; //высота сцены для расчетов var arr = []; //создаем массив ромбов var polygon = new Polygon(width/2, height/2, 2, 4); //создаем один ромб // с радиусом в 2 пикселя в центре сцены for (var i = 0; i < num; i++) { //цикл заполнения массива ромбов arr[i] = polygon.clone().attr({ //каждый элемент // является копией созданного ранее ромба fillColor: 'hsl(' + i * 360 / num + ', 90%, 50%)', //цвет нового // ромба в формате hsl: насыщенность всегда 0.9, светолота всегда 0.5, // а тон меняется в зависимости от i x: width / 2, //новый ромб также создается в центре сцены y: height / 2 }); } var i = 0; //перменная-индекс для перебора массива ромбов function play() { //основная функция нашей анимации var polygon = arr[i]; //присваиваем переменной текущий элемент массива stage.removeChild(polygon); //удаляем со сцены ромб, //аналогичный тому, который мы будем создавать polygon.attr({ //устанавливаем аттрибуты данного ромба scaleX: 1, //масштаб по иксу - единица scaleY: 1, //масштаб по игреку - также единица }); polygon.addTo(stage); //риусм наш ромб единичного масштаба polygon.animate(14 * num, { //анимируем наш ромб: //продолжительность анимации - 14*num кадров, действие //анимации - линейное машстабирование ромба по обеим осям scaleX: width * 3, scaleY: height * 3 }, {isTimelineBound: false}); //анимация не должна быть //привязана к таймлайну для корректного отоброжения ( //специфика bonsai.js) i = (i + 1) % num; //увеличиваем индекс, чтобы начать //рисовать следующий ромб в массиве. Остаток от деления на // num гарантирует то, что такой ромб с таким индексом //есть в массиве } stage.length(10); //устанавливаем частоту кадров нашей сцены равной 16 stage.on(0, play); //указываем, что при каждый кадр //должна запускаться наша функция play }, width: 1000, //указываем ширину и высоту сцены height: 1000 }); </script> </body> </html>
Прикрепленный файл | Размер |
---|---|
saada_demoscene.zip | 44.47 кб |