Skip to content

Instantly share code, notes, and snippets.

@sbosell
Created October 10, 2013 18:40
Show Gist options
  • Save sbosell/6923321 to your computer and use it in GitHub Desktop.
Save sbosell/6923321 to your computer and use it in GitHub Desktop.
Animados con Angular Parte II
[
{"name": "pusheen", "width":96, "height": 100, "nframes": 4, "rframes": 2, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-ash3/s296x100/851578_185127901661476_1172208870_n.png", "speed": 200},
{"name": "anooki", "width":480, "height":480, "nframes": 13, "rframes":4 , "url":"https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/p480x480/851584_629578030410264_540358936_n.png", "speed": 100},
{"name": "beast", "width":150, "height":100, "nframes": 5, "rframes": 3, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/s296x100/851560_668853719808805_601127660_n.png", "speed": 50}
]
// lucuma tiene los modulos externales que usamos, safeApply y timeFunctions
var app = angular.module('plunker', ['ui.bootstrap', 'ui.slider', 'lucuma']);
app.value('stickerJson', 'animacion.json');
app.controller('MainCtrl', function ($scope, $rootScope, $modal, stickerJson, $http) {
$scope.stickersData = [];
$scope.stickers = [];
$scope.speed = 200;
$scope.isAnimated = false;
$http.get(stickerJson).success(function (data) {
//$scope.stickersData = [pusheen, anooki, beast];
$scope.stickersData = data;
});
// function que abrirá el modal
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'sticker.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
// queremos mandar stickersData al controlador de Modal
return $scope.stickersData;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.animation = selectedItem;
// copiaremos los datos de sticker
var cpy = angular.copy(selectedItem);
// colocar el sticker en un array, este array es lo que muestra los stickers en la pagina
$scope.stickers.push(cpy);
}, function () {
// dismiss modal
});
};
});
// esta funcion es el controller para el modal. mandamos el array de stickers
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.changeSticker = function (item) {
$scope.selected.item = item;
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
// La carne del app, el directive que muestra nuestro sticker
app.directive('sticker', function (timeFunctions, safeApply) { // inyectamos timeFunctions y safeApply
return {
restrict: 'AE', // podria ser atributo o elemento
replace: true, // vamos a reempleazar el html con nuestro template
scope: {
Animation: '=animation' // tiene un dato lo que es el objeto de la animacion
},
template: '<div class="sticky"></div>', // nuestro template para el sticker, un div con estilo
link: function (scope, element, attrs) {
// guardar info del sticky animacioin
// usamos este en nuestra funcion para calcular y
// visualizar el sticker
var stickyInfo = {
width: 0,
height: 0,
index: 0,
nRows: 0,
nCols: 0,
nFrames: 0
};
// estamos haciendo un watch en Animation para ver si tenemos algo
scope.$watch('Animation', function (Animation) {
// cuando tengamos animacion, vamos a ininiarlo y lanzarlo
if (Animation) {
console.log(Animation.name);
stickyInfo.nRows = Math.ceil(Animation.nframes / Animation.rframes);
stickyInfo.index = 0;
stickyInfo.nCols = Animation.rframes;
stickyInfo.nFrames = Animation.nframes;
stickyInfo.width = Animation.width / Animation.rframes;
stickyInfo.height = Animation.height / stickyInfo.nRows;
// ininicar la animacion
element.css({
'backgroundPosition': '0 0',
'background-image': 'url(' + Animation.url + ')',
'width': stickyInfo.width + 'px',
'height': stickyInfo.height + 'px'
});
scope.isAnimated = true; //queremos verlo animado siempre
}
});
scope.$watch('isAnimated', function (isAnimated) {
// cuando isAnimated cambie necesitamos lanzarlo o pararlo
if (scope.isAnimated) {
startAnimation();
} else {
timeFunctions.$clearInterval(scope.animateTimeout);
}
});
/* function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
} */
scope.$watch('Animation.speed', function (speed) {
// cuando speed cambie, necesitamos reininciar la animacion con nueva velocidad
if (speed) {
if (!scope.isAnimated) {
safeApply(scope, function () {
scope.isAnimated = true;
});
} else {
startAnimation();
}
}
});
function startAnimation() {
// empezar animacion
if (scope.isAnimated) {
timeFunctions.$clearInterval(scope.animateTimeout);
}
scope.animateTimeout = timeFunctions.$setInterval(animateBg, scope.Animation.speed, scope);
}
function animateBg() {
// camibar la pos de BG para la animacion
element.css({
'backgroundPosition': calcBgPosition(stickyInfo.index, stickyInfo.nRows, stickyInfo.nCols, stickyInfo.nFrames, stickyInfo.width, stickyInfo.height)
});
stickyInfo.index++;
}
element.bind('click', function (e) {
e.preventDefault();
safeApply(scope, function () {
scope.isAnimated = !scope.isAnimated;
});
});
function calcBgPosition(index, nRows, nCols, nFrames, width, height) {
var i = index % nFrames;
var x = 0,
y = 0;
x = (i % nCols) * width * -1;
y = Math.floor(i / (nCols)) * height * -1;
return x + 'px ' + y + 'px';
}
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script data-require="[email protected]" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>
<script src="lucuma.js"></script>
<script src="angular-slider.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="app.js" ></script>
<link href='style.css' rel='stylesheet' />
</head>
<body ng-controller='MainCtrl'>
<h1>Facebook Stickers - Animados con Angular</h1>
<div ng-hide='stickersData.length>0' style='display:block'>Getting sticker info...</div>
<button ng-click='open()' ng-show='stickersData.length>0' style='display:none' >Stickers</button>
<div class='container'>
<div class="row" ng-repeat='sticky in stickers'>
<div class="col-icon"> <sticker animation='sticky'></sticker>
</div>
<div class="col-slider">
<div class="slider" ui-slider="{orientation: 'vertical'}" min="20" max="1000" step="10" ng-model="sticky.speed"></div>
<label>{{sticky.speed}}</label>
</div>
</div>
</div>
</body>
</html>
<div class="modal-header">
<h3>Select your Sticker</h3>
</div>
<div class="modal-body">
<div ng-repeat="item in items">
<a ng-click="changeSticker(item)"><sticker animation='item' isanimated='false' speed='0'></sticker></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment