Je ne peux pas vous dire combien de fois j'ai été demandé récemment comment faire le "UrbanSpoon Effet ".
Maintenant, je n'ai aucune idée exactement comment les gens de UrbanSpoon ne leur demande, mais ils ont bien fait. Je n'ai pas de temps pour un tutoriel complet en ce moment, ou de faire une mise en œuvre complète de l'effet, mais dans le processus d'aider quelqu'un dans un forum, j'ai écrit une application exemple qui montre peu de la théorie de base de façon à faire votre UIPickerView tournent en rond pendant plus longtemps.
Comme je l'ai dit, ce projet loin d'être aussi poli que ce ne Urbanspoon - J'ai triché sur le flou, car j'ai frappé quelques bugs lors du portage mon code NSImage noyau de convolution de travailler avec UIImage et je n'ai pas le temps de déboguer quelque chose qui gnarly droit maintenant. Mon "flou" est juste un redimensionnement double - vers le bas puis remonter. C'est vraiment juste une interpolation, mais il sorta rend floue. Je n'aurais probablement pas utiliser cette méthode de flou dans une application réelle, mais, là encore, je serais payé pour une application réelle.
Cette application ne charge l'utilisation de l'accéléromètre pour lancer le spin. Afin de faire tourner la vue de sélecteur de plus, je sous-classé UIPickerView. Mon sous-classe avait exactement une méthode. C'est une méthode non documentée qui retourne la durée de la rotation, de sorte que vous venez de retourner le nombre de secondes que vous voulez que votre tour d'aller pour:
L'autre chose essentiel à noter dans cette application est que mon UIPickerViewDataSource mensonges sur le nombre de lignes de chaque composant a. J'ai un kRowMultiplier constante appelée. Je prends le décompte du tableau qui correspond à un composant particulier, et je le multiplier par kRowMultiplier. Cette valeur est actuellement fixé à 100, donc si le tableau qui alimente un composant a dix points, ma datasource mensonges et dit qu'il ya un millier, et puis il ne cesse de nourrir les mêmes dix articles à plusieurs reprises dans le même ordre par le calcul de la réelle de la ligne dans le tableau à utiliser:
Cela crée un composant avec les mêmes valeurs répétées encore et encore.
Lorsque la vue apparaît en premier, je charge des tableaux avec des vues contenant à la fois les données floues et non brouillées. Vous ne voulez pas être floues programmation des valeurs plus et plus lorsque le spin arrive, alors nous le faisons une fois et stocker les valeurs dans les tableaux. J'ai ensuite mis en ligne le composant pour une valeur dans le milieu. Cela signifie que l'utilisateur ne voit jamais les lignes vides au-dessus et en dessous des valeurs réelles, ce qui contribue à créer l'illusion de tourner sans fin.
Maintenant, quand une valeur est sélectionnée dans le sélecteur, je fais un bait-et-revenir au milieu. J'ai déplacer le composant à la même valeur qu'ils sont actuellement, mais de retour dans le milieu de la roue. De cette façon, quoi qu'il arrive, ils vont jamais voir les lignes blanches en haut ou en bas. Depuis que je suis en les déplaçant à la même valeur et les valeurs environnantes sont les mêmes, et je lui dis de ne pas animer le changement, l'utilisateur n'a aucune idée de ce qui s'est passé.
Enfin, lorsque le bouton de rotation est pressé, ou si l'utilisateur secoue le téléphone, je calcule un nombre aléatoire pour chaque composant. Ce nombre est une valeur entre 0 et la taille du tableau moins 1. Cela me dit ce que la nouvelle valeur choisie au hasard sera. Puis-je déplacer les composants (encore une fois, sans animation) pour la ligne correspondante dans le haut ou le bas du cadran, et ensuite d'animer à la valeur sélectionnée à l'autre bout de la roue.
J'ai mis une variable appelée isSpinning pour que je sache s'il ya lieu de fournir des données floues ou non brouillées à la casserole. J'ai mis le spin pendant 5 secondes, donc 4,7 secondes dans le futur, j'ai mis la valeur à NO. Cette cause c'est d'arrêter un moment avant de brouiller l's'arrête de tourner. Ceci est fait de telle sorte que les derniers mots affiché ne sera pas floue.
Vous pouvez télécharger l'exemple de projet ici.
Une note, cependant: j'ai utilisé un couple de sans-papiers, les méthodes privées dans ce projet. J'ai habituellement peur de le faire, mais dans le souci d'obtenir ce code sur la porte rapidement, que j'ai fait. J'utilise une méthode non documentée pour le redimensionnement de la UIImage afin de créer l'effet de flou de faux, et un autre pour maintenir le sélecteur de faire des sons lorsque je d'abord définir les valeurs, car je ne veux pas l'utilisateur à réaliser que je me déplace le sélecteur - qui ferait voler en éclats l'illusion. Ce sont des utilisations assez subtile des méthodes de sans-papiers alors je doute qu'ils avaient obtenir votre demande rejetée, mais ils le pouvaient. Ils sont également pas des méthodes qui sont susceptibles de changer. Mais, là encore, ils pourraient - c'est toujours un risque avec des méthodes sans papiers, afin caveat emptor - à utiliser à vos risques et périls. Si vous voulez jouer la sécurité, à un flou de mouvement réel et sortir les appels à la setSoundsEnabled UIPickerView: méthode.
Note: Il ya une nouvelle version de ce code disponible here.
Maintenant, je n'ai aucune idée exactement comment les gens de UrbanSpoon ne leur demande, mais ils ont bien fait. Je n'ai pas de temps pour un tutoriel complet en ce moment, ou de faire une mise en œuvre complète de l'effet, mais dans le processus d'aider quelqu'un dans un forum, j'ai écrit une application exemple qui montre peu de la théorie de base de façon à faire votre UIPickerView tournent en rond pendant plus longtemps.
Comme je l'ai dit, ce projet loin d'être aussi poli que ce ne Urbanspoon - J'ai triché sur le flou, car j'ai frappé quelques bugs lors du portage mon code NSImage noyau de convolution de travailler avec UIImage et je n'ai pas le temps de déboguer quelque chose qui gnarly droit maintenant. Mon "flou" est juste un redimensionnement double - vers le bas puis remonter. C'est vraiment juste une interpolation, mais il sorta rend floue. Je n'aurais probablement pas utiliser cette méthode de flou dans une application réelle, mais, là encore, je serais payé pour une application réelle.
Cette application ne charge l'utilisation de l'accéléromètre pour lancer le spin. Afin de faire tourner la vue de sélecteur de plus, je sous-classé UIPickerView. Mon sous-classe avait exactement une méthode. C'est une méthode non documentée qui retourne la durée de la rotation, de sorte que vous venez de retourner le nombre de secondes que vous voulez que votre tour d'aller pour:
#import "JLPickerView.h"
@implementation JLPickerView
- (double)scrollAnimationDuration
{
return 5.0;
}
@end
L'autre chose essentiel à noter dans cette application est que mon UIPickerViewDataSource mensonges sur le nombre de lignes de chaque composant a. J'ai un kRowMultiplier constante appelée. Je prends le décompte du tableau qui correspond à un composant particulier, et je le multiplier par kRowMultiplier. Cette valeur est actuellement fixé à 100, donc si le tableau qui alimente un composant a dix points, ma datasource mensonges et dit qu'il ya un millier, et puis il ne cesse de nourrir les mêmes dix articles à plusieurs reprises dans le même ordre par le calcul de la réelle de la ligne dans le tableau à utiliser:
int actualRow = row%[[self arrayForComponent:component] count];Cela crée un composant avec les mêmes valeurs répétées encore et encore.
Lorsque la vue apparaît en premier, je charge des tableaux avec des vues contenant à la fois les données floues et non brouillées. Vous ne voulez pas être floues programmation des valeurs plus et plus lorsque le spin arrive, alors nous le faisons une fois et stocker les valeurs dans les tableaux. J'ai ensuite mis en ligne le composant pour une valeur dans le milieu. Cela signifie que l'utilisateur ne voit jamais les lignes vides au-dessus et en dessous des valeurs réelles, ce qui contribue à créer l'illusion de tourner sans fin.
[picker selectRow: [component1Data count] * (kRowMultiplier / 2) inComponent:0 animated:NO];Maintenant, quand une valeur est sélectionnée dans le sélecteur, je fais un bait-et-revenir au milieu. J'ai déplacer le composant à la même valeur qu'ils sont actuellement, mais de retour dans le milieu de la roue. De cette façon, quoi qu'il arrive, ils vont jamais voir les lignes blanches en haut ou en bas. Depuis que je suis en les déplaçant à la même valeur et les valeurs environnantes sont les mêmes, et je lui dis de ne pas animer le changement, l'utilisateur n'a aucune idée de ce qui s'est passé.
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
NSArray *componentArray = [self arrayForComponent:component];
int actualRow = row%[componentArray count];
int newRow = ([componentArray count] * (kRowMultiplier / 2)) + actualRow;
[picker selectRow:newRow inComponent:component animated:NO];
}Enfin, lorsque le bouton de rotation est pressé, ou si l'utilisateur secoue le téléphone, je calcule un nombre aléatoire pour chaque composant. Ce nombre est une valeur entre 0 et la taille du tableau moins 1. Cela me dit ce que la nouvelle valeur choisie au hasard sera. Puis-je déplacer les composants (encore une fois, sans animation) pour la ligne correspondante dans le haut ou le bas du cadran, et ensuite d'animer à la valeur sélectionnée à l'autre bout de la roue.
- (IBAction)spin
{
if (! isSpinning)
{
// Calculate a random index in the array
spin1 = arc4random()%[component1Data count];
spin2 = arc4random()%[component1Data count];
spin3 = arc4random()%[component1Data count];
// Put first and third component near top, second near bottom
[picker selectRow:([picker selectedRowInComponent:0]%[component1Data count]) + [component1Data count] inComponent:0 animated:NO];
[picker selectRow:(kRowMultiplier - 2) * [component2Data count] + spin2 inComponent:1 animated:NO];
[picker selectRow:([picker selectedRowInComponent:2]%[component3Data count]) + [component3Data count] inComponent:2 animated:NO];
// Spin to the selected value
[picker selectRow:(kRowMultiplier - 2) * [component1Data count] + spin1 inComponent:0 animated:YES];
[picker selectRow:spin2 + [component2Data count] inComponent:1 animated:YES];
[picker selectRow:(kRowMultiplier - 2) * [component3Data count] + spin3 inComponent:2 animated:YES];
isSpinning = YES;
// Need to have it stop blurring a fraction of a second before it stops spinning so that the final appearance is not blurred.
[self performSelector:@selector(stopBlurring) withObject:nil afterDelay:4.7];
}
}J'ai mis une variable appelée isSpinning pour que je sache s'il ya lieu de fournir des données floues ou non brouillées à la casserole. J'ai mis le spin pendant 5 secondes, donc 4,7 secondes dans le futur, j'ai mis la valeur à NO. Cette cause c'est d'arrêter un moment avant de brouiller l's'arrête de tourner. Ceci est fait de telle sorte que les derniers mots affiché ne sera pas floue.
Vous pouvez télécharger l'exemple de projet ici.
Une note, cependant: j'ai utilisé un couple de sans-papiers, les méthodes privées dans ce projet. J'ai habituellement peur de le faire, mais dans le souci d'obtenir ce code sur la porte rapidement, que j'ai fait. J'utilise une méthode non documentée pour le redimensionnement de la UIImage afin de créer l'effet de flou de faux, et un autre pour maintenir le sélecteur de faire des sons lorsque je d'abord définir les valeurs, car je ne veux pas l'utilisateur à réaliser que je me déplace le sélecteur - qui ferait voler en éclats l'illusion. Ce sont des utilisations assez subtile des méthodes de sans-papiers alors je doute qu'ils avaient obtenir votre demande rejetée, mais ils le pouvaient. Ils sont également pas des méthodes qui sont susceptibles de changer. Mais, là encore, ils pourraient - c'est toujours un risque avec des méthodes sans papiers, afin caveat emptor - à utiliser à vos risques et périls. Si vous voulez jouer la sécurité, à un flou de mouvement réel et sortir les appels à la setSoundsEnabled UIPickerView: méthode.
Aucun commentaire:
Enregistrer un commentaire